Как сделать 3 разных цвета на Highcharts

Question

Я использую highcharts для своего проекта, сейчас я просто могу сделать 2 разных цвета. синий, когда значение> = 0, и красный для отрицательного значения.

есть ли способ сделать это в 3 цвета? поэтому, когда значение = 0, цвет становится зеленым я попытался использовать «connectedTo», который кто-то продемонстрировал на там , но мои данные [] динамические.

$(function () {
      $('#jugernaut<?php echo $a; ?>').highcharts({
            chart: {
                  type: 'column',
                   spacing:[0,0,0,0],
      height: 450
            },
            title: {
                  text: '<?php echo $key->carline.' '.$key->conveyeor ?>',
                  style: {
                            fontSize: '18px',
                            fontFamily: 'Verdana, sans-serif'
                  }
            },
    yAxis: 
    {     visible: false,
      tickLength:1, 
           title: {
           text: ''
             },
      labels: {
    style: {
      fontSize: '17px',
      fontWeight: 'bold'
    },
    plotLines: [{
        color: '#C0C0C0',
        width: 5,
        value: 0
    }]

  },
     },
    xAxis:{
     tickInterval:1,
     labels: {
    style: {
      fontSize: '17px',
       fontWeight: 'bold'
    },
  }
   },
        credits: {
                text: '',
    enable:false,
     
          },
  plotOptions:{

    marker:{
      enabled: false
    }
  },
  series: [
  {
    name: ' ',
    type: 'spline',
    data: <?php echo json_encode(${"jamnya".$i});?>,
    color: '#1122DD',
    threshold: 0,
    negativeColor: 'red',
  }
  ]
    });
});

* извините, если мой английский такой плохой

Answer 1

Да, это возможно. Вы можете использовать функцию zones, например, чтобы определить цвета для трех уровней значений. Вот пример кода:

series: [{
        data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
        zones: [{
            value: 0,
            color: 'red'
        }, {
            value: 0.000001,
            color: 'green'
        }, {
            color: 'blue'
        }]
}]

Кроме того, вы можете достичь этого, добавив свойство color: 'green' непосредственно к точке 0, вот так:

series: [{
    data: [-10, -5, {y:0, color: 'green'}, 5, 10, 15, 10, 10, 5, {y:0, color: 'green'}, -5],
    zones: [{
        value: 0,
        color: 'red'
    }, {
        color: 'blue'
    }]
}]

Вот примеры:

http://jsfiddle.net/ggxmo9n1/

http://jsfiddle.net/0s8oukLv/

Справочник по API:

https://api.highcharts.com/highcharts/plotOptions.line.zones