带有多色区域的Highcharts折线图

Question

我是highCharts的新手，我正在尝试获取带有Multicolored Area的LineChart。 我在论坛上搜索了很多内容，甚至在堆栈溢出时都进行了搜索，但没有找到任何内容。附上我想要的图像格式。

我尝试了这个FiddleLink。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        series: [{
            name: 'USA',
            data: [10,20,30,null,40,50]
        }, {
            name: 'USSR/Russia',
            data: [null,null,30,66,40]
        },
         {
            name: 'INIA',
            data: [null,null,55,66,40]
        }]
    });
});

所以如果有人在这方面对我有帮助，将对我有很大帮助。

Answer 1

通过使用plotBands功能，您应该能够获得想要的效果。

演示：http://jsfiddle.net/BlackLabel/zex0rgdu/

xAxis: {
  plotBands: [{
    color: '#FCFFC5',
    from: 0,
    to: 2
  }, {
    color: 'red',
    from: 2,
    to: 4
  }, {
    color: 'blue',
    from: 4,
    to: 5
  }],
},

API：https://api.highcharts.com/highcharts/xAxis.plotBands