Javascript Highcharts：向面积折线图添加多种颜色

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

:

我已经实现了所有的功能，除了面积图的多色线。我想用不同的颜色显示图表的不同渐变，因此我需要在线条上使用多种颜色

我已经测试过如Show这样的区域，也测试过类似的常见插件。两者都不起作用。分区应用于我不想要的区域，插件只能给线条或区域上色，而不能只给面积图中的线条上色

我当前的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: [],
};

这很好，但当您尝试在桌面浏览器上添加大约150多个区域时，会出现一些性能缺陷

还有一个很小的渲染问题—分区之间的间隙很小

最好的

---

Philipp

您可以添加一个额外的带

分区的
样条曲线
系列：

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

现场演示：

API:
您可以添加一个额外的
样条曲线
系列和
分区
：

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

现场演示：

API:
谢谢！这很有效，但我注意到了一些问题。首先，区域之间有小间隙（参见我编辑的文章）。第二，当使用超过150个区域时，性能相当差。我想性能问题很难解决。Hi@Philipp Staudt，您可以用类似的方式使用
multicolor_series
插件，但只能使用
行
series-请检查此示例：完美。这在性能方面也非常有效！谢谢这很有效，但我注意到了一些问题。首先，区域之间有小间隙（参见我编辑的文章）。第二，当使用超过150个区域时，性能相当差。我想性能问题很难解决。Hi@Philipp Staudt，您可以用类似的方式使用
multicolor_series
插件，但只能使用
行
series-请检查此示例：完美。这在性能方面也非常有效！