如何爲plot.ly js圖例着色，爲什麼它是黑色的？

當我的圖呈現時，一切都很好，除了圖例只顯示黑色。分組的條形圖顯示了我的預期。所有的數據和顏色都很棒，但傳說並不正確。如何爲plot.ly js圖例着色，爲什麼它是黑色的？

我加載plotly圖表插入到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>

來源

2016-02-26 notthehoff

我有一個類似的問題，這 - 自上堆疊條形顏色看起來很大，但傳說樣本全黑。

我無法找到一個官方的解決方案，所以手動設置顏色圖例使用生成圖表後Plotly內置的D3，如：

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

（這個例子只是樣式的單選框）

來源

2016-09-20 21:32:50 tom

如何爲plot.ly js圖例着色，爲什麼它是黑色的？

回答

相關問題