高图表自定义图案填充显示不同的描边宽度

Question

我正在尝试为高图表创建自定义图案填充。

它是一条水平虚线，从一行到另一行交替的起点(第一个从 0,0 开始，第二个从 3,10 开始，依此类推)。

我编辑了Highcharts JSfiddle示例，将自定义模式替换为以下内容(在这里您可以找到我的"最终"版本)：

color: {
pattern: {
path: {
d: 'M 0 0 H 8 M 14 0 H 22 M 3 10 H 19',
strokeWidth: 0.5
},
width: 22,
height: 20
}
}

问题是两行线的宽度不同。
我在文档中找不到任何参数来解决此问题。
我不知道问题是在我的模式定义还是高图表错误中。
有什么想法吗？

Answer 1

路径按原样首先移动到0,0，然后移动到14,0，最后3,10：

d: 'M 0 0 H 8 M 14 0 H 22 M 3 10 H 19'

您可以将其更改为0,1然后更改为14,1，然后3,11，线条的宽度相同：

d: 'M 0 1 H 8 M 14 1 H 22 M 3 11 H 19'

从0,0开始的线以边界为中心，这意味着一半的线被切断，因此只需将它们全部向下移动 1 即可确保整条线可见。

更新的小提琴