Highchart：为左阶梯区域的最后一点添加数据填充

Question

当左阶梯区域中的最后一个值与上一个不同时，很难看到它。 （我们只在图表的末尾看到一条线）

演示： https://jsfiddle.net/x2qf5wuy/1/

$("#container").highcharts({
    chart: {
        type: 'area'
    },

    plotOptions: {
        area: {
            stacking: 'normal',
            step: 'left'
        }
    },
    series: [{
        name: "Example 1",
        data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 0]
    }, {
        name: "Example 2",
        data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 10]
    }]
});

highchart中有一种方法可以向数据系列添加人工填充，以便用户可以看到最后一点？

想要的结果：

Answer 1

您可以添加与最后一个序列点具有相同的y值的点，并使用setExtremes方法仅显示area的所需部分：

chart: {
    type: 'area',
    events: {
        load: function() {
            var series = this.series[1],
                lastPoint = series.data[series.data.length - 1];

            series.addPoint({
                x: lastPoint.x + 100,
                y: lastPoint.y
            }, false);
            this.xAxis[0].setExtremes(null, lastPoint.x + 0.5);
        }
    }
},

实时演示： https://jsfiddle.net/BlackLabel/54a6jdgy/

API参考：

https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes