基于 Y 轴值的 Highcharts 动态梯度

Question

在下面的示例图表中 - https://jsfiddle.net/fujigoko/rkp2mdf7/1/ - 我有一个非常硬编码的渐变定义如下：

  chart: {
    type: 'line',
    plotBackgroundColor: {
      linearGradient: [0, 300, 0, 0],
      stops: [
        [0, 'yellow'],
        [1, 'green']
      ]
    }
  },

我实际需要的是根据 Y 轴值有 4 个停止点的渐变：

• Y 轴最小值处为黄色，无论基于数据是什么
• 黄色值为 150
• 绿色值为 250
• 绿色位于 Y 轴的最大值，无论它基于数据是什么

我一直在尝试将值转换为像素并使用 yAxis.Max 来执行此操作，但没有成功。 Highcharts 可以做到这一点吗？

Answer 1

要计算停靠点，我建议使用 LinearGradient 的 x1、x2、y1、y2 属性。您可以在图表的加载事件中动态获取 yAxis 位置。此外，

yAxis.toPixels()

在此用例中也很有用。

示例代码：

  chart: {
    type: 'line',
    events: {
      load: function() {
        let chart = this,
          yAxis = chart.yAxis[0],
          gradient = {
            linearGradient: {
              x1: 0,
              y1: 1,
              x2: 0,
              y2: 0
            },
            stops: [
              [0, 'yellow'],
              [(chart.plotHeight - yAxis.toPixels(150, true)) / chart.plotHeight, 'yellow'],
              [(chart.plotHeight - yAxis.toPixels(250, true)) / chart.plotHeight, 'green'],
              [1, 'green']
            ]
          };

        chart.update({
          chart: {
            plotBackgroundColor: gradient
          }
        });
      }
    }
  },

演示： https://jsfiddle.net/BlackLabel/4v3xreq6/

API参考：

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels