关于前端:highcharts-0202渐变色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