javascript - example - highcharts save image to server

Usar un patrón de relleno en lugar de color con HighCharts

Question

He estado buscando varias formas de producir gráficos en webapps y he descubierto que HighCharts es especialmente útil. La aplicación necesita atender el daltonismo, así que estoy buscando usar patrones en lugar de colores de relleno, como se describe en esta pregunta .

Algo así debe estar en la sección <defs> del 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>

y luego en lugar de fill="#0d233a" tendría fill="url(#triangles)"

¿Alguien más ha hecho esto con HighCharts? ¿Es posible hacer que HighCharts lo haga sin hackearlo?

Answer 1

Parece que hay un plugin de relleno de patrones .

Answer 2

Puede usar el complemento Highcharts para eso. El tema se crea aquí .

Por ejemplo, golpeteo para series:

{
    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''
    }
}