highcharts 以特殊方式为Highchart列设置渐变

fgw7neuy  于 2022-12-13  发布在  Highcharts
关注(0)|答案(1)|浏览(157)

我用Highcharts库中的渐变绘制了一个柱形图。
你可以看到here
第一个
问题是关于梯度,
这里有三个小节x1c 0d1x
第一列值为30
第二个是50
最后是100
但是梯度对所有的都是相同的!
(all的有绿色和红色)
这是不对!
我需要一个梯度
第一列为绿色区域
像这样的东西

我该如何实现它?

dgtucam1

dgtucam11#

来自文档:
请注意,缐性渐层的定义方式可能会有所不同(如数组或对象)。此外,起始/结束位置的计算方式也可能会有所不同,视gradientUnits属性而定(此属性只能在宣告为对象的缐性渐层中设定)。
梯度单位值:

  • userSpaceOn当渐变声明为数组时使用默认值。开始和结束位置必须声明为图表上的像素。
  • objectBoundingBox当gradient声明为对象时的默认值。起始和结束位置在0到1的范围内,如上所述。使用这个值有时会导致彩色元素消失。

因此,使用数组(其值以像素为单位)代替linearGradient的object。

color: {
    linearGradient: [0, 0, 0, 400],
    stops: [
      [0, 'red'],
      [1, 'green']
    ]
  }

现场演示:https://jsfiddle.net/BlackLabel/tfxLpck1/
文件:https://www.highcharts.com/docs/chart-design-and-style/colors

相关问题