Highcharts-Y轴按点颜色

Question

如何配置y轴使其具有不同的颜色？

来自此：

enter image description here

为此：

enter image description here

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>

Demo：

• 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