[highcharts] 02_回調函數實現高級顏色漸變詳情 - highcharts,前端,可視化 DiracKeeko 博客

描述:
為了讓柱狀圖顯示美觀，要求柱狀圖單柱的顏色以漸變色展示，如下圖所示。

因為highcharts使用svg渲染，而svg內的線性漸變屬性為：linearGradient，若只是為了單純的實現上圖效果，我們完全可以單獨設置每個series的color屬性。

注: 上面這張圖對應的series有兩個子元素
即
console.log(typeof(stockOptions.series)); // array
console.log(stockOptions.series.length); // 2

實現思路如下:
stockOptions.series.forEach((item, seriesIndex) => {
item.color = {

        linearGradient: {
          x1: 0,
          y1: 1,
          x2: 0,
          y2: 0
        },
        stops: [
          [0, Highcharts.color("#fff").get('rgb')],
          [1, Highcharts.color(colorArr[seriesIndex]).get('rgb')]
        ]
      }

})

linearGradient：{ x1,y1,x2,y2 } 屬性用來規定漸變區域和漸變的方向。
例子中的漸變為垂直方向漸變（x始終為0），在y方向上，漸變從point1（對應100%）開始，到point2（對應0%）結束。
實際效果上從上到下柱子的顏色由stops[1] 的顏色到 stops[0]的顏色逐漸變化 (colorArr[seriesIndex] 到 ”#fff”漸變)。

stops:表示一個漸變的過程，0~1之間表示將柱子分割成多個部分進行顏色設置。實例中分割為了首尾兩部分。

（stops 就按從小到大來寫，不要把步進倒過來，沒嘗試過步進反過來會怎樣
stops: [
[0, color0],
[0.5, color1],
[1, color2],
]
）

進一步，若視覺要求柱子以某一y值為分界，大於該值的部分柱子顏色由#A到#B漸變，小於該值的部分由#C到#D漸變，如下圖所示，

那麼僅僅通過給stockOptions.series中的每一項設置漸變色是無法實現的，此時我們需要在回調函數中去完成動態顏色切換的效果。

主要原理為，遍歷series數組中每一個points，（points也是array）,遍歷points中的數據點point，通過point的y值與閾值比較，依次更新其顏色。

如果是用Highcharts的方式引入，那麼回調函數應該在創建Highcharts實例的時候配置。
如下圖所示

如果是在vue項目中，多用highcharts-vue的方式引入
這時callback作為屬性傳入組件
<highcharts :options="stockOptions" :callback="setGradientColor"></highcharts>