Plotly sunburst 小节自定义颜色 JavaScript答案

【问题标题】：Plotly sunburst sub-section custom color JavaScriptPlotly sunburst 小节自定义颜色 JavaScript
【发布时间】：2022-10-19 00:35:46
【问题描述】：

我在 JS 中使用 plotly，试图绘制一个旭日形图。一切正常，但我想让图表上的每个子部分都有不同的颜色。我似乎无法弄清楚，非常感谢任何帮助。

这是我的旭日形首饰的样子：

请注意，“Enos”和“Noam”具有相同的颜色，我希望它们具有不同的颜色，或者至少具有不同的不透明度。

像这样：

这是我的代码：

        var data = [{
            "type": "sunburst",
            "labels": ["Eve", "Awan", "Seth", "Enos", "Noam", "Enoch"],
            "parents": ["", "Eve", "Eve", "Seth", "Seth", "Awan"],
            "values": [100, 20, 80, 60, 20, 20]
        }];
        var layout = {
            sunburstcolorway: ["#636efa", "#ef553b"]
        };
        Plotly.newPlot('myChart', data, layout)

【问题讨论】：

标签： javascript plotly

【解决方案1】：

如果你想为你的轨迹自定义颜色，那么你需要设置标记对象的颜色数组。在那里，您可以为旭日形图的每个部分设置颜色：

var data = [{
  "type": "sunburst",
  "labels": ["Eve", "Awan", "Seth", "Enos", "Noam","Enoch"],
  "parents": ["", "Eve", "Eve", "Seth", "Seth", "Awan"],
  "values": [100, 20, 80, 60, 20, 20],
  "opacity" : 1,
  "marker": {
    colors: ["#ffffff","#fc6e08","#3e81ed","#3293e3","#c429ad","#d99543"] 
  }
}];

var layout = {
  // sunburstcolorway: ["#636efa", "#ef553b"]
};
      
Plotly.newPlot('myChart', data, layout)

所以第一个值（“Eve”）具有数组的第一种颜色，第二个值（“Awan”）具有第二种颜色，依此类推。在示例中，我将不透明度设置为 1 以从颜色数组中获取真实颜色。

【讨论】：