Question

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

这是一条水平虚线，从一行到另一行的起点是交替的（第一行从0,0开始，第二行从3,10继续，依此类推）。

我编辑了Highcharts JSfiddle example，将自定义模式替换为以下（here you can find my "final" version）：

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
    }
}

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

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可以确保整个线可见。

Updated Fiddle

Highcharts自定义图案填充显示不同的笔触宽度

1 个答案: