javascript - 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

您可以添加带有区域的额外样条线系列:

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