Как покрасить plot.ly js легенда и почему она черная?

Question

Когда мой график визуализируется, все отлично. ИСКЛЮЧЕНИЕ легенда показывает только цвета. График сгруппированной гистограммы показывает, как я ожидаю. Все данные и цвета прекрасны, но легенда неверна.

Я загружая 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> 

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

(это пример только стили одной коробке)