具有条纹列的HighCharts列

时间:2013-04-11 13:27:20

标签: javascript highcharts

我正在使用highcharts来渲染一些数据。我想要一个柱形图,其中列是条纹或条纹。请有人帮助我了解如何实现这一目标。

感谢。

1 个答案:

答案 0 :(得分:3)

您可以使用模式:

图片: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);