[highcharts] 02_02渐变色linearGradient使用说明

本文是对很早一篇文章
《[[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的颜色)

贴一个代码演示

完结。
同步更新到自己的语雀：
https://www.yuque.com/dirackeeko/blog/rsxznt79uob1qhai