樣條圖漸變填充

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