Highcharts：为区域折线图添加多种颜色

Question

我正在尝试创建一个像这样的图表：

：

除了区域图的多色线之外，我已经实现了所有功能。我想以不同的颜色显示图表的不同渐变，因此我需要多行颜色。

我已经测试了像here这样的区域以及像this这样的常见插件。两者都不起作用。区域应用于我不想要的区域，插件只能着色线区域，而不仅仅是区域图表中的线条。

我当前的Highcharts设置如下所示：

{
    title: {
        text: null
    },
    xAxis: {
        crosshair: true,
        labels: {
            format: '{value} km'
        },
        title: {
            text: null
        },
        opposite: true,
        startOnTick: true,
        endOnTick: false,
        min: 0
    },
    yAxis: {
        startOnTick: true,
        showFirstLabel: false,
        endOnTick: false,
        maxPadding: 0.35,
        title: {
            text: null
        },
        min: 100,
        labels: {
            format: '{value} m'
        }
    },
    plotOptions: {
        dataGrouping: {
            enabled: false
        },
        showInNavigator: true,
        stacking: 'normal',
        series: {
            dragDrop: {
                draggableY: true
            },
            point: {
                events: {
                    mouseOver: (e) => {
                        this.chartHover.emit({
                            distance: e.target.x * 1000
                        });
                    },
                }
            },
        },
        area: {
            dragDrop: {
                draggableY: true,
                dragPrecisionY: 1
            }
        }
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    chart: {
        update: true,
        styledMode: true,
        marginBottom: 0,
        marginRight: 0
    },
    tooltip: {
        headerFormat: '',
        pointFormatter: function () {
            let point = this;
            if (!this.series) {
                return;
            }
            return '<span class="tooltip-area-series-' + this.series.index + '">\u25CF</span> ' + point.series.name + ': <b>' + point.y + 'm</b><br/>';
        },
        shared: true
    },
    series: [],
};

有没有内置的解决方案？

编辑：

我使用了ppotaczek提出的解决方案：

series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
    color: 'red',
    value: 2
}, {
    color: 'green',
    value: 4
}]
}]

这非常好用，但是当你尝试添加大约时会有一些性能上的缺陷。桌面浏览器上超过150个区域。

还存在一个小的渲染问题 - 区域之间的间隙很小。

最好，

菲利普

Answer 1

您可以使用spline添加额外的zones系列：

series: [{
    type: 'areaspline',
    id: 'areaSeries',
    data: data
}, {
    type: 'spline',
    linkedTo: 'areaSeries',
    data: data,
    zoneAxis: 'x',
    zones: [{
        color: 'red',
        value: 2
    }, {
        color: 'green',
        value: 4
    }]
}]

现场演示：http://jsfiddle.net/BlackLabel/8er6y4u3/

API：https://api.highcharts.com/highcharts/series.spline.zones