javascript - 如何为plot.ly js图例着色以及为什么它是黑色的？

Question

当我的图表渲染时，一切都很好，除了图例仅显示黑色。分组条形图显示了我的预期。所有的数据和颜色都很棒，但图例不正确。

我正在将绘图加载到 salesforce Visualforce 页面，如下所示:

    <apex:panelGroup styleClass="charts" layout="block">
    <div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
</apex:panelGroup>
<script>
    var trace1 = {
      y: ['B2B', 'Commercial', 'Retail'], 
      x: [20, 14, 23],
      marker: {
          color: ['#f8b98d', '#f8b98d', '#f8b98d']  
      },
      name: 'Annual Quota', 
      type: 'bar',
      orientation: 'h'  

    };

    var trace2 = {
      y: ['B2B', 'Commercial', 'Retail'], 
      x: [12, 18, 29],
      marker: {
          color: ['#f58b3f', '#f58b3f', '#f58b3f']  
      },
      name: 'Current Market Size', 
      type: 'bar',
      orientation: 'h'

    };

    var data = [trace1, trace2];

    var layout = {barmode: 'group'};

    Plotly.newPlot('myDiv', data, layout, {displayModeBar: false});
</script>

Answer 1

我遇到了与此类似的问题 - 堆叠条上的自定义颜色看起来很棒，但图例样本全是黑色。

我找不到官方解决方案，因此使用 Plotly 内置的 d3 生成图表后手动设置图例中的颜色，例如:

var legendBoxes = document.getElementById("div-id-for-plot").getElementsByClassName("legendbar");
Plotly.d3.select(legendBoxes[0]).style("fill", "put your colour definition here");

(此示例仅设置单个框的样式)