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

高图：向区域折线图添加多种颜色

1 个答案: