как мы можем установить разные цвета для шаблонов highcharts-default-patterns?

Я хочу показать диагональные полосатые узоры желаемого цвета в гистограмме с накоплением столбцов. я использую URL шаблона по умолчанию (#highcharts-default-pattern-0) для него, но не могу изменить его цвет, так как я хочу, чтобы этот шаблон был в разных цветах.

Для справки я прикрепляю изображение, которое хочу получить с помощью диагональных полос.diagonal-striped-columns

Я пытался добиться этого с помощью pattern-fills, но не смог. .

Пожалуйста, предоставьте ценный вклад. Заранее спасибо!


highcharts react-highcharts
person Atul    schedule 06.10.2019    source источник
comment
Привет @Atul, с какой проблемой вы столкнулись при использовании модуля pattern-fill? Здесь все работает: jsfiddle.net/BlackLabel/0etopfLs   -  person ppotaczek    schedule 07.10.2019
comment
Спасибо @ppotaczek за ваш ответ. На самом деле изначально я не знал о создании SVG, поэтому я не мог этого понять. позже я прочитал о создании SVG и его шаблонах, после чего мне стало понятнее. Но вы поделились хорошим примером jsfiddle, я ценю. Спасибо.   -  person Atul    schedule 12.10.2019

Ответы (1)


arrow_upward
1
arrow_downward

Лучше всего использовать официальный модуль pattern-fill:

plotOptions: {
    series: {
        color: {
            pattern: {
                path: {
                    d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
                    strokeWidth: 2
                },
                width: 10,
                height: 10,
                opacity: 0.4
            }
        }
    }
}

Текущая демонстрация: https://jsfiddle.net/BlackLabel/0etopfLs/

Документы: https://www.highcharts.com/blog/tutorials/pattern-fills/

person ppotaczek    schedule 14.10.2019