更改绘图背景颜色

Question

寻求如何将plotly图的背景颜色更改为透明的建议？

我查看了文档，但没有找到任何参考资料。

pie_chart = {
  'data': [{
    'labels': ['V0', 'V1', 'V2', 'V3', 'V4', 'V5', 'V6', 'V7', 'V8', 'V9'],
    'values': [55, 22, 31, 32, 33, 45, 44, 42, 12, 67],
    'type': 'pie',
    'sort': false,
  }],

  'layout': {
    backgroundColor: "rgba(255,255,255,0.5)",
    width: 320,
  }

}

Plotly.newPlot('plot', pie_chart.data, pie_chart.layout);

#plot {
  background-color: lightblue;
}

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plot"> </div>

- Idan

---

在布局中使用 paper_bgcolor: "rgba(0,0,0,0)"，我想您的问题就解决了！ - Naren Murali

Answer 1

请使用layout的paper_bgcolor属性使其透明。

paper_bgcolor（颜色）：
默认值：“＃fff”
设置绘制图形的纸张颜色。

根据官方文档，可在此处查看。

pie_chart = {
  'data': [{
    'labels': ['V0', 'V1', 'V2', 'V3', 'V4', 'V5', 'V6', 'V7', 'V8', 'V9'],
    'values': [55, 22, 31, 32, 33, 45, 44, 42, 12, 67],
    'type': 'pie',
    'sort': false,
  }],

  'layout': {
    paper_bgcolor: "rgba(0,0,0,0)",
    width: 320,
  }

}

Plotly.newPlot('plot', pie_chart.data, pie_chart.layout);

#plot {
  background-color: lightblue;
}

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plot"> </div>

- Naren Murali

---

@Idan 已更改 - Naren Murali

Answer 2

plot_bgcolor 设置 x 和 y 轴之间绘图区域的颜色。

paper_bgcolor 设置图形绘制的纸张颜色（= 轴之外但在父 div 内部）。

因此，要实现透明背景，您需要在布局部分同时使用这两个属性，如下所示：

layout = {
   plot_bgcolor: "rgba(0,0,0,0)",
   paper_bgcolor: "rgba(0,0,0,0)"
}

官方参考文档：https://plot.ly/javascript/reference/#layout-paper_bgcolor

这个链接提供了有关于如何设置绘图区域背景颜色的详细信息。

- Donat Szecsko

Answer 3

pie_chart = {
  'data': [{
    'labels': ['V0', 'V1', 'V2', 'V3', 'V4', 'V5', 'V6', 'V7', 'V8', 'V9'],
    'values': [55, 22, 31, 32, 33, 45, 44, 42, 12, 67],
    'type': 'pie',
    'sort': false,
  }],

  'layout': {
    width: 320,
  }

}

Plotly.newPlot('plot', pie_chart.data, pie_chart.layout);

#plot {
  background-color: lightblue !important;
}
.main-svg {
   background-color: transparent !important;
}

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plot"> </div>

这是你在寻找的内容吗？希望能有所帮助！

- Sidhanshu_

---

你知道的，是的和不。我已经尝试过了，但愚蠢地失败了。那是一个可以接受的解决方法，但我仍然想知道是否有比“important”更好的方法。 - Idan

事情是我们必须覆盖该绘图的默认样式设置。关键词是“doing the same”！ - Sidhanshu_

@Sidhanshu_ 在 plotly 中有一个属性可以设置布局的背景颜色。在布局中只需给出 'layout': { width: 320, bgcolor: "rgb(0,0,0,0)" } 并删除 CSS .main-svg { background-color: transparent !important; }，同时 plot CSS 不需要 !important。 - Naren Murali

@NarenMurali 我试过了。但是默认样式仍然覆盖了给定的背景样式！ - Sidhanshu_

@Sidhanshu_ 不好意思，属性应该是 paper_bgcolor: "rgba(0,0,0,0)"。 - Naren Murali