我们如何为 highcharts-default-patterns 设置不同的颜色？答案

【问题标题】：how can we set different colors to highcharts-default-patterns?我们如何为 highcharts-default-patterns 设置不同的颜色？
【发布时间】：2020-02-04 04:15:09
【问题描述】：

我想在堆积柱形图中显示所需颜色的斜条纹图案。我正在为其使用默认模式 url(#highcharts-default-pattern-0)，但无法更改它的颜色，因为我希望这种模式具有各种颜色。

作为参考，我附上了我想使用斜条纹实现的图像。

我尝试使用pattern-fills 来实现它，但无法获得它。

请提供您宝贵的意见。提前致谢！

【问题讨论】：

嗨@Atul，您在使用pattern-fill 模块时遇到了什么问题？这里一切正常：jsfiddle.net/BlackLabel/0etopfLs
感谢@ppotaczek 的回复，其实一开始我并没有意识到 SVG 的创建，所以我无法理解它。后来我读到了关于 SVG Creation 和它的模式，然后它对我来说变得更清楚了。但是您分享了很好的 jsfiddle 示例，我很感激。谢谢。

标签： highcharts react-highcharts

【解决方案1】：

最好的办法是使用官方的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/

【讨论】：