小编Mah*_*gir的帖子

语言：JavaScript

我想在条形图的条形图中包含一些模式。我看不到默认情况下有任何可用的目的。

因此，我尝试抓住动态生成的“ svg”组件中的“ point”元素。然后创建一个“ pattern”元素。我认为在创建内部模式标签之后，我将能够设置cusotom属性。

但是它根本不起作用。

下面是使用的代码示例：

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

Plotly.newPlot('myDiv',data);

var ticks = document.getElementsByClassName('point');
for (var i = 0; i < ticks.length; i += 1) {
          var patt = document.createElement("pattern");
          patt.setAttribute('patternTransform','rotate(30)');
          patt.setAttribute('patternUnits','userSpaceOnUse');
          patt.setAttribute('fill', 'red');
          ticks[i].appendChild(patt);

}

我参考下面在网上某处找到的“”标签。

<pattern id="diagonal-stripes-4-8" x="0" y="0" width="8" height="8"    patternUnits="userSpaceOnUse" patternTransform="rotate(30)">
<rect x="0" y="0" width="4" height="8" style="stroke:none; fill:purple;" />
</pattern>

语言：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);