Highcharts - цвета оси Y по точкам

Question

Как настроить ось Y таким образом, чтобы она имела разные цвета?

Отсюда:

введите описание изображения здесь

Для этого:

введите описание изображения здесь

JSFIDDLE:

    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        },
        lineWidth: 2
    },

Может, у кого-то была похожая проблема?

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-basic/

Answer 1

Вы можете достичь этого, установив yAxis.lineColor как Highcharts.GradientColorObject. Проверьте демо и код, размещенный ниже.

Код:

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    events: {
      load: function() {
        let chart = this,
          yAxis = chart.yAxis[0];

        yAxis.update({
          lineColor: {
            linearGradient: [chart.plotLeft + yAxis.width, 0, 0, 0],
            stops: [
              [0, 'yellow'],
              [0.33, 'yellow'],
              [0.33, 'red'],
              [0.66, 'red'],
              [0.66, '#21B04C'],
              [1, '#21B04C']
            ]
          }
        })
      }
    }
  },
  xAxis: {
    categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
  },
  yAxis: {
    lineWidth: 4
  },
  series: [{
    name: 'Year 1800',
    data: [107, 31, 635, 203, 2]
  }, {
    name: 'Year 1900',
    data: [133, 156, 947, 408, 6]
  }, {
    name: 'Year 2000',
    data: [814, 841, 3714, 727, 31]
  }, {
    name: 'Year 2016',
    data: [1216, 1001, 4436, 738, 40]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

Демонстрация:

• https://jsfiddle.net/BlackLabel/7feLmsvq/

Ссылка API:

• https://api.highcharts.com/highcharts/yAxis.lineColor

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

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

• https://api.highcharts.com/class-reference/Highcharts.GradientColorObject