代码之家 › 专栏 › 技术社区 › fabien-michel

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

highcharts

0

fabien-michel · 技术社区 · 7 年前

当左阶梯区域中的最后一个值与前一个值不同时,很难看到它(我们只看到图表末尾的一条线)

$("#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中,有一种方法可以向数据系列中添加人工填充,以便用户可以看到最后一点?

通缉结果:

1 回复 | 直到 7 年前

1

ppotaczek 7 年前

可以使用相同的参数添加点 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