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

There now is builtin pattern support。我们现在可以使用 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>

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

现在，如果 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>

plotly：我想在条形图的条形图中包含一些图案

1 个答案: