在列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