高图表图案填充对角线

Question

我正在尝试向 highcharts 柱形图添加图案填充。

列颜色为#9fdae9，对角线图案为黑色，不透明度为 20%。最好不要处理图像，因为会有具有相同对角线图案的不同颜色的列。

我查看了 Highchartspattern-fill.js，但缺少示例。我对 svg 模式没有经验，所以不确定是否可以用它来完成。

如有任何建议，我们将不胜感激。

Answer 1

这是您可以参考的示例：

const linePattern = "M 10 0 L 0 10 M 11 9 L 9 11 M 1 -1 L -1 1";
  series: [{
    data: [1, 3, 2, 4, 5],
    color: {
      pattern: {
        backgroundColor: "#9fdae9",
        path: {
          d: linePattern,
          stroke: "rgba(0,0,0,0.2)"
        },
        width: 10,
        height: 10
      }
    }
  }]

演示： https://jsfiddle.net/BlackLabel/dnf2akgv/