javascript - 带有条纹列的 HighCharts 列

Question

我正在使用 highcharts 来呈现一些数据。我想要一个列有条纹或条纹的柱形图。请有人可以帮助我了解如何实现这一目标。

谢谢。

Answer 1

您可以使用模式：

图片：http: //jsfiddle.net/VmxPQ/

    var r = chart.renderer,
        pattern = r.createElement('pattern')
            .attr({
                id: 'pattern',
                patternUnits: 'userSpaceOnUse',
                x: 0,
                y: 0,
                width: 15,
                height: 15,
                viewBox: '0 0 10 10',
            })
            .add(r.defs);

   r.rect(0, 0, 10, 10, 0)
       .attr('fill', '#ddd')
       .add(pattern);

   r.image('http://highcharts.com/demo/gfx/sun.png',0,0,30,30)

       .attr({
           stroke: '#333'
       })
       .add(pattern);



    pattern = r.createElement('pattern')
        .attr({
            id: 'pattern2',
            patternUnits: 'userSpaceOnUse',
            x: 0,
            y: 0,
            width: 15,
            height: 15,
            viewBox: '0 0 10 10',
        })
        .add(r.defs);

   r.rect(0, 0, 10, 10, 0)
       .attr('fill', '#eee')
       .add(pattern);

    //hover status
    r.image('http://highcharts.com/demo/gfx/sun.png',0,0,30,30) 

       .attr({
           stroke: '#666'
       })
       .add(pattern);