Заполнение пользовательского шаблона Highcharts показывает различную ширину штриха

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обеспечивает видимость всей строки.

Обновленная скрипка