Question

语言：JavaScript
框架：Plotly

我有一个要求，我希望x轴值单独着色，而不是着色x轴中的所有值。

我尝试了下面的代码，但它对轴上的所有值都做了同样的事情。

这里的颜色是红色＆＃39;应用于x轴上的所有值。我需要根据数组中提到的颜色对每个值进行着色＆＃39; col＆＃39;在下面的代码中。

var data = [{
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [20, 14, 23],
  type: 'bar'
}];

var col = ['red','black','yellow'];

var layout = {

  xaxis : {
    tickangle : -45,
    tickfont : {
      size : 16,
      color : 'red'
    }
  }

};

Plotly.newPlot('myDiv', data,layout);

Answer 1

如果要单独为条形着色，则需要将颜色分配给数据中marker对象的颜色属性。
如果你想单独为轴'上色，那么就无法直接在图中进行。 tickfont color只需要一种颜色，但这不应该阻止我们。 tick text位于SVG元素中，类名为xtick。我们可以选择它并用我们的颜色覆盖它的填充颜色。

var col = ['red','black','yellow'];
var data = [{
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [20, 14, 23],
  type: 'bar',
  marker: {color: col}
}];

var layout = {
  xaxis : {
    tickangle : -45,
    tickfont : {
      size : 16,
      color : 'red'
    }
  }
};

Plotly.newPlot('myDiv', data,layout);

var ticks = document.getElementsByClassName('xtick');
for (var i = 0; i < ticks.length; i += 1) {
  ticks[i].getElementsByTagName('text')[0].style.fill = col[i % col.length];  
}

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>

Plotly - 我想根据条件为每个X轴值着色为不同的颜色

1 个答案: