乐趣区

关于前端:highcharts-0202渐变色linearGradient使用说明

jiezi

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

退出移动版