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

Question

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

• 正区域渐变应为蓝色
• 负区域渐变应为红色
• 渐变色在 Y 轴附近应为黑色/透明（值 0）

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

为了实现这个目标，我不得不硬编码第二个渐变停止点：

• 正梯度：第二个停止强制为 0.67
• 负梯度：第二个停止强制为 0.33

显然，这两个值不应该是硬编码的，那么无论数据如何，我如何实时计算这两个值？ 每个值都应该是渐变部分相对于系列总范围的百分比。

• 对于正梯度：(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

您可以使用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 参考：

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

• https://api.highcharts.com/class-reference/Highcharts.Series#update

Answer 2

您应该同时使用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')]
  ]
}