如何为负值绘制不同的渐变填充？

Question

如何在正负区域同时获得渐变填充，而不仅仅是纯色？

正区域梯度应为蓝色
负区渐变应为红色
渐变颜色应 black/transparent 靠近 Y 轴（值 0）

目标： https://codepen.io/francoisG/pen/gOOoEjQ

为了实现这个目标，我不得不对第二个梯度停止点进行硬编码：

正梯度：秒停强制为0.67
负梯度：秒停强制为0.33

显然，这 2 个值不应该被硬编码，那么无论数据如何，我如何实时计算这 2 个值？每个值应该是梯度部分与系列总范围相比的百分比。

对于正梯度：(Ymax - 0) / (Ymax - Ymin)，在本例中为 12 / 12 + 6 = 12/18 = 0.67
对于负梯度：(0 - Ymin) / (Ymax - Ymin)，在这个情况 6 / 12 + 6 = 6/18 = 0.33

我的问题是我不知道在图表代码中计算这些数据。我用 Ymin 和 Ymax 尝试了很多东西，但没有成功。感谢您的帮助

series: [{
  name: 'John',
  data: [3, 4, -6, 5, 4, 10, 12],
  fillColor: {
    linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
    stops: [
      [0, Highcharts.getOptions().colors[0]],
      [0.67, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
    ]
  },
  zones: [{
    value: 0,
    color: '#D76363',
    fillColor: {
      linearGradient: {x1: 0, y1: 1, x2: 0, y2: 0},
      stops: [
        [0, 'rgba(215,99,99,0.5)'],
        [0.33, 'rgba(2,0,0,0)']
      ],
    }
  }]

Answer 1

您应该同时使用fillColor和negativeFillColor，并配置为线性渐变样式。我在这里修改了你的代码：https://codepen.io/tredex/pen/yLLprxz

negativeFillColor: {
    linearGradient: {x1: 0, y1: 1, x2: 0, y2: 0},
    stops: [
      [0, '#D76363'],
      [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
    ]
},

fillColor: {
  linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
  stops: [
    [0, Highcharts.getOptions().colors[0]],
    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
  ]
}

Answer 2

您可以使用 chart.events.load 回调函数和 update() 方法来设置这些计算值。检查下面发布的演示和代码：

chart: {
  renderTo: 'container',
  type: 'areaspline',
  events: {
    load: function() {
      const chart = this;
      const yAxis = chart.yAxis[0];

      let posGrad = (yAxis.max - 0) / (yAxis.max - yAxis.min);
      let negGrad = (0 - yAxis.min) / (yAxis.max - yAxis.min);

      chart.series[0].update({
        fillColor: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
          },
          stops: [
            [0, Highcharts.getOptions().colors[0]],
            [posGrad, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
          ]
        },
        zones: [{
          value: 0,
          color: '#D76363',
          fillColor: {
            linearGradient: {
              x1: 0,
              y1: 1,
              x2: 0,
              y2: 0
            },
            stops: [
              [0, 'rgba(215,99,99,0.5)'],
              [negGrad, 'rgba(2,0,0,0)']
            ],
          }
        }]
      });
    }
  }
}

演示：

https://jsfiddle.net/BlackLabel/9wey1z4q/

API参考：

如何为负值绘制不同的渐变填充？

How to draw a different gradient fill for negative values?

javascript

linear-gradients

highcharts