情节：我想在条形图的条形图中包括一些模式

Question

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

Answer 1

现在有内置模式支持。我们现在可以使用一个pattern对象。

该模式有多个选项，其中之一是shape：

类型：枚举或枚举数组，其中之一 ( "" | "/" | "" | "x" | "-" | "|" | "+" | "." ) 默认
值：""
设置形状图案填充。默认情况下，不使用任何图案来填充该区域。

例如你可以这样做：

const data = [{
  x: ["giraffes", "orangutans", "monkeys"],
  y: [20, 14, 23],
  type: "bar",
  marker: {
    pattern: {
      shape: "-",
    },
  },
}, ];

Plotly.newPlot("graph", data);

<script src="https://cdn.plot.ly/plotly-2.3.1.min.js"></script>

<div id="graph" style="width: 1000; height: 550px"></div>

有关模式组合的一些示例，您可以查看此。

现在，如果pattern提供的选项未涵盖您的特定模式，您可以定位该pattern元素并设置您自己的自定义模式。作为示例，我将采用您在问题中列出的矩形图案示例：

const data = [{
  x: ["giraffes", "orangutans", "monkeys"],
  y: [20, 14, 23],
  type: "bar",
  marker: {
    pattern: {
      shape: "-",
    },
  },
}, ];

Plotly.newPlot("graph", data);

document.querySelector("pattern").innerHTML = "<rect x='0' y='0' width='4' height='8' style='stroke:none; fill:purple;' />"

<script src="https://cdn.plot.ly/plotly-2.3.1.min.js"></script>

<div id="graph" style="width: 1000; height: 550px"></div>