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

Question

语言：JavaScript
框架：Plotly

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

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

此处，“红色”颜色应用于 x 轴上的所有值。我需要根据下面代码中数组“col”中提到的颜色对每个值进行着色。

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数据中对象的颜色属性。
• 如果您想单独为轴的刻度着色，则无法直接在 plotly 中进行。tickfont color只需要一种颜色，但这不应该阻止我们。刻度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>