使用填充圖案而不是顏色與HighCharts

Question

我一直在尋找各種方式來生成web應用程序中的圖形，並發現HighCharts特別有用。該應用需要迎合色盲，所以我正在使用圖案而不是填充顏色 - 如in this question所述。

像這樣的東西必須在SVG的<defs>部分：

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

，然後代替fill="#0d233a"我不得不fill="url(#triangles)"

有沒有其他人有HighCharts這樣做呢？是否有可能讓HighCharts在不破解它的情況下做到這一點？

Answer 1

似乎有一個pattern fill plugin。

Answer 2

您可以使用Highcharts plugin。主題被創建here。

例如圖案的系列：

{ 
    type: 'column', 
    data: [148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6], 
    color: { 
     pattern: 'http://highcharts.com/demo/gfx/pattern2.png', 
     width: 6, 
     height: 6, 
     // VML only: 
     color1: 'red', 
     color2: 'yellow' 
    } 
}