Установить цвет серии на основе оси X в столбце Highchart

Question

Я пытаюсь построить Higchart и раскрасить его столбцы на основе его оси x, например, на этом графике столбцы имеют красный цвет, если x меньше 10, и зеленый, если больше 20, в противном случае желтый

На самом деле я устанавливаю цвет каждого столбца, чтобы получить этот результат, и я хотел бы избежать его и использовать условия.

Есть ли способ сделать это?

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Column chart'
  },
  plotOptions: {
    column:{
    	colorByPoint: true,
      colors: [
      '#F00','#F00','#F00','#F00','#F00','#F00','#F00','#F00','#F00','#F00',
      '#FF0','#FF0','#FF0','#FF0','#FF0','#FF0','#FF0','#FF0','#FF0','#FF0',
      '#0F0','#0F0','#0F0','#0F0','#0F0','#0F0','#0F0','#0F0','#0F0','#0F0'
      ]
    }
  },
  series: [{
    name: 'Val',
    data: [
      [ 1,5],
      [ 2,3],
      [ 3,4],
      [ 4,7],
      [ 5,2],
      [ 6,4],
      [ 7,2],
      [ 8,3],
      [ 9,6],
      [10,5],
      [11,3],
      [12,4],
      [13,7],
      [14,2],
      [15,4],
      [16,2],
      [17,3],
      [18,6],
      [19,5],
      [20,3],
      [21,4],
      [22,7],
      [23,2],
      [24,4],
      [25,2],
      [26,3],
      [27,1],
      [28,7],
      [29,6],
      [30,2]
    ]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

Массив, определяющий зоны внутри серии. Зоны могут быть применены к оси X, оси Y или оси Z для пузырьков, в соответствии с параметром zoneAxis. Определения зоны должны быть в порядке возрастания относительно значения.

Так что вы можете использовать:

plotOptions.series.zones

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Column chart'
  },
  plotOptions: {
    column:{
    	colorByPoint: true,
      
    }
  },
  series: [{
    zoneAxis: 'x',
    zones: [{
            value: 10,
            color: '#f7a35c'
        }, {
            value: 20,
            color: '#7cb5ec'
        }, {
            color: '#90ed7d'
        }],
    data: [
      [ 1,5],
      [ 2,3],
      [ 3,4],
      [ 4,7],
      [ 5,2],
      [ 6,4],
      [ 7,2],
      [ 8,3],
      [ 9,6],
      [10,5],
      [11,3],
      [12,4],
      [13,7],
      [14,2],
      [15,4],
      [16,2],
      [17,3],
      [18,6],
      [19,5],
      [20,3],
      [21,4],
      [22,7],
      [23,2],
      [24,4],
      [25,2],
      [26,3],
      [27,1],
      [28,7],
      [29,6],
      [30,2]
    ]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Справочник по API: https://api.highcharts.com/highcharts/plotOptions.series.zones