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

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

Я загружаю график на страницу 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>

javascript d3.js plotly
person notthehoff    schedule 26.02.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

У меня была похожая проблема: нестандартные цвета на сложенных столбцах выглядели великолепно, но образцы легенды были полностью черными.

Я не смог найти официальное решение, поэтому вручную установил цвета в легенде после того, как диаграмма была сгенерирована с использованием Plotly, встроенного в d3, например:

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

(этот пример просто стилизует одно поле)

person tom    schedule 20.09.2016