样条图渐变填充

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中玩弄这个，看看它是如何工作的。

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'] 
      ] 
     },