Как нарисовать другую градиентную заливку для отрицательных значений?

Question

Как получить градиентную заливку в положительной и отрицательной областях, а не только в сплошном цвете?

• Положительная область GRADIENT должна быть синего цвета
• Отрицательная область GRADIENT должна быть красного цвета
• цвет градиента должен быть черным / прозрачным вблизи оси 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

Вы можете использовать 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')]
  ]
}