使用填充图案而不是HighCharts的颜色

sam*_*ael 7 javascript svg highcharts

我一直在寻找各种方法来生成webapps中的图形,并发现HighCharts特别有用.该应用程序需要迎合色盲,所以我正在寻找使用模式而不是填充颜色 - 如本问题所述.

这样的东西需要<defs>在SVG 的部分:

<pattern id="triangles"  width="10" height="10" patternUnits="userSpaceOnUse">
    <polygon points="5,0 10,10 0,10"/>
</pattern>
<pattern id="diagonal-hatch" patternUnits="userSpaceOnUse" width="4" height="4">
    <path d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2"/>
</pattern>
<pattern id="cross-hatch" patternUnits="userSpaceOnUse" x="0" y="0" width="6" height="6">
    <g style="fill:none; stroke:#22fa23; stroke-width:1">
        <path d="M0,0 l10,10"/>
        <path d="M10,0 l-10,10"/>
    </g>
</pattern>
Run Code Online (Sandbox Code Playgroud)

然后而不是fill="#0d233a"fill="url(#triangles)"

还有其他人用HighCharts做过这件事吗?甚至可以让HighCharts这样做而不会将其破坏成碎片?