javascript - 根据列 Highchart 上的 X 轴设置系列颜色

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

定义系列内区域的数组。根据 zoneAxis 选项，区域可以应用于气泡的 X 轴、Y 轴或 Z 轴。区域定义必须按值的升序排列。

所以你可以使用:

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