highcharts - 样条图渐变填充

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/

线性渐变的语法是：

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 中尝试使用它，看看它是如何工作的。

Answer 2

要设置图表的背景，请使用chart.plotBackgroundImage。如果要为整个图表设置图像，请对容器使用 CSS 样式。

关于渐变，它有效，看看：http: //jsfiddle.net/Fusher/2Gzkd/3/

        color: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0, 'red'],
                [0.5, 'green'],
                [1, 'blue']
            ]
        },