[highcharts] 02_02漸變色linearGradient使用説明詳情 - 前端,highcharts DiracKeeko 博客

本文是對很早一篇文章
《[[highcharts] 02_回調函數實現高級顏色漸變]》的補充(https://segmentfault.com/a/1190000041028581)

先貼個數據的實例

stockOptions.series = {
  data: [2, 9, 13, null, 50, 17, 19],
  fillColor: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, 
    stops: [
      [0, "#0000ff"],
      [1, "#ff0000"]
    ]
  }
}

linearGradient

linearGradient中 x1、x2 都為 0 表示橫向上沒有漸變。
-> 實測只要x1 === x2 (如 x1: 1, x2: 1 或者 x1: 0, x2: 0) 橫向上都不會有漸變。
-> 實測只要y1 === y2 縱向上都不會有漸變。

特殊情況:

  x1 === x2, y1 === y2 此時會使用stops中 [1, colorValueA] 這個colorValueA值

如何記憶:

  我們可以linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }想象成二維平面中的兩個點: 左上點(x1, y1) 右下點(x2, y2)

      (x1, y1)

                  (x2, y2)

(x1, y1)對應一個顏色, (x2, y2)對應一個顏色，在二維平面上進行顏色漸變。

stops

stops: [[step1, value1], [step2, value2], [step3, value3], ..., [stepN, valueN]]
其中step取值範圍為[0, 1]

1、當 x1 === x2 && y1 === y2時，整個圖像不漸變，圖像的顏色取值為stops數組的最後一項的顏色。
2、當 !(x1 === x2 && y1 === y2)時，也就是(x1, y1) (x2, y2)不重合，此時stop數組的序，會影響漸變效果。

- 對 stops: [[1, colorValueA], [0, colorValueB]] 這種情況，漸變不生效，整個圖使用的是colorValueA顏色

stops: [

[1, "#ff0000"],
[0, "#0000ff"]

]

對 stops: [[0, colorValueA], [1, colorValueB]]，這種情況下才會漸變。
漸變時, (x1, y1) 的值對應stops裏的一個顏色，(x2, y2)對應stops裏的一個顏色
如: 上面的linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }
分解成兩個點左上點(x1: 0, y1: 0) 右下點(x2: 0, y2: 1)
左上點對應的顏色是colorValueA (stops中step為0的顏色, [0, colorValueA])
右上點對應的顏色是colorValueB (stops中step為1的顏色)

貼一個代碼演示