javascript - 在图表上显示最后一个 Y 轴值

Question

我有一个带有日期时间 X 轴的样条图。默认情况下，我想在图表上显示最新/最后的 Y 轴值。

我所有的值目前都设置为在悬停时显示在工具提示中，我不知道如何实现这一点。这是一个每日统计图表，每天都会更新，所以如果用户可以快速看到 Y 轴上的最新值，那就太好了。

任何提示或解决方案将不胜感激！

Answer 1

好的，所以我已经设法使用 dataLabels 属性及其格式化程序来做到这一点。

重要的部分是 dataLabels 选项。您首先必须将其设置为启用，然后制作一个格式化程序以仅在它是系列的最后一个点时返回点值。标签的 x 和 y 值也必须根据您的需要进行编辑（取决于图表容器的宽度/高度等）。在示例中，我只是试图使其可读。

这是片段：

var chart = new Highcharts.Chart({

chart: {
    renderTo: 'container'
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

plotOptions: {
    series: {
       dataLabels : {
                enabled : true,
                align : 'left',
                x : 3,
                y : 9,
                formatter : function() {
                    if (this.point.x == this.series.data[this.series.data.length - 1].x) {
                        return this.y;
                    } else {
                        return null;
                    }
                }
            }
    }
},

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
    data: [106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5]
}]

});

我也做了这个解决方案的小提琴：http: //jsfiddle.net/tzEdX/