Question

寻找有关如何将情节图的背景颜色更改为透明的建议？

我查看了文档，但找不到任何参考。

＆＃13;

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);

＆＃13;

#plot {
  background-color: lightblue;
}

＆＃13;

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

＆＃13;

Answer 1

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

这是你在寻找什么？希望它有所帮助!!

Answer 2

请使用paper_bgcolor的{{1}}属性将其设为layout。

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

从官方文档中可以获得here

transparent

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;
}

Answer 3

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

更改绘图背景颜色

3 个答案: