Highcharts - 在區域圖表中如何爲多個系列使用漸變色？

期望每個系列區域都有不同的漸變色。Highcharts - 在區域圖表中如何爲多個系列使用漸變色？

試過我已經通過Highcharts演示識字，拿知道如何填寫一個區域系列漸變色：

fillColor: { 
    liearGradient: {x1: 0, y1: 0, x2: 0, y2: 1}, 
    stops: [0, 'red'], 
     [1, 'white'] 
}

，但是，我沒有任何想法如何設置不同的漸變色爲每系列區域。

由於我的英語水平差，我上傳了兩張照片來清晰地表明我的問題，而右邊是我期望的結果。

Screen Shot 2016-12-26 at 2.21.24 PM.png Screen Shot 2016-12-26 at 2.22.05 PM.png

更新：感謝@Alex傑尼索夫，每個系列都有不同的LinearGradient的顏色，但現在的問題是該點的顏色，特別是最後一個下。

總之，是否可以設置線性漸變色，每個系列獨立，沒有遮蓋。

更新：https://jsfiddle.net/TabGre/fyxqsq4L/1/

來源

2016-12-26 Tab Gre

您將包括fillColor每個系列與series數據，像這樣：

plotOptions: { 
     area: { 
      stacking: 'normal' 
     } 
    }, 

series: [{ 
     name: 'Series 1', 
     data: [502, 635, 809, 947, 1402, 3634, 5268], 
     lineWidth: 3, 
     lineColor: 'rgba(58, 204, 188, 1)', 
     marker: { 
      lineWidth: 1, 
      lineColor: 'rgba(58, 204, 188, 1)', 
      fillColor: 'rgba(58, 204, 188, 1)' 
     }, 
     fillColor: { 
      linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1}, 
      stops: [ 
       [0, 'rgba(58, 204, 188, 1)'], 
       [1, 'rgba(255,255,255,.25)'] 
      ] 
     }, 
    }, { 
     name: 'Series 2', 
     data: [106, 107, 111, 133, 221, 767, 1766], 
     lineWidth: 3, 
     lineColor: 'rgba(247, 106, 1, 1)', 
     marker: { 
      lineWidth: 1, 
      lineColor: 'rgba(247, 106, 1, 1)', 
      fillColor: 'rgba(247, 106, 1, 1)', 
      symbol: 'circle' 
     }, 
     fillColor: { 
      linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1}, 
      stops: [ 
       [0, 'rgba(247, 106, 1, 1)'], 
       [1, 'rgba(255,255,255,.25)'] 
      ] 
     }, 
    }]

來源

2016-12-26 07:38:18

謝謝，它的工作原理，但現在我覺得我應該深入瞭解'linearGradient'的價值以及設置的最佳不透明度 –

稍微編輯我的代碼以允許行併爲每個系列獨立設置點屬性，這裏有一個可用的JSFiddle - https://jsfiddle.net/23w97oLe/2/ - 關於'封面'，你可以分享你正在使用的代碼的JSFiddle嗎？ –

幹得好，這個區域'堆疊'等於'正常'的關鍵是實現這個目標嗎？ –

Highcharts - 在區域圖表中如何爲多個系列使用漸變色？

回答

相關問題