样条图渐变填充

Question

我第一次使用Highcharts,看起来非常令人印象深刻.但是我试图实现类似的东西:

是否可以使用Hightcharts？我知道你可以在饼图中添加渐变,但是我找不到任何地方如何实现它.我可以将背景图像设置为图表吗？

Answer 1

可以使用以下方法设置背景图像或渐变:

chart: {
        type: 'line',
        plotBackgroundImage: 'http://www.highcharts.com/demo/gfx/skies.jpg'
    },

要么

chart: {
        type: 'line',
        plotBackgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(200, 200, 255)']
            ]
        }
    },

http://api.highcharts.com/highcharts#chart.plotBackgroundImage 或 http://api.highcharts.com/highcharts#chart.plotBackgroundColor

但是,这是绘图区域的背景,而不是线本身.要为线条赋予渐变颜色,可以将系列的颜色指定为渐变.例如

  series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        color: {
            linearGradient: [0, 0, 0, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(100, 100, 155)']
            ]
        }
    }]

http://jsfiddle.net/wXqM9/

linearGradients的语法是:

linearGradient: [x1, y1, x2, y2]

创建一个线性渐变对象,其起点为(x1,y1),终点为(x2,y2).

 stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(100, 100, 155)']
            ]

这指定渐变中的两个点和要使用的颜色.在这种情况下,渐变将从开始时的(255,255,255)变为(100,100,155)和结束.如果您指定了3个停靠点,那么您可以使渐变从中间的一种颜色变为另一种颜色,最后变为另一种颜色.希望这可以帮助.我建议你只是尝试在我发布的jsfiddle中玩这个,看它是如何工作的.