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

（这个例子只是设计一个方框）

我如何为plot.ly js传奇色彩，为什么它是黑色的？

1 个答案: