javascript - HighCharts - 在 stockChart 中显示最后一个值的 dataLabel

Question

我想在图表上显示股票的最后价值。

我尝试添加 dataLabel 但它不起作用。

var data = [
  [1589973960000,506.5065,0.0],
  [1589974020000,506.3055,0.0],
  [1589974080000,506.1055,0.0],
  [1589974140000,506.1055,0.0],
  [1589974200000,506.005,0.0],
  [1589974260000,506.205,0.0],
  [1589974320000,null,null],
  [1589974380000,null,null]
];

// Calculate last non-empty index
var lastIndex = 0;
for (var i = 1; i < data.length; i++) {
  if (data[i][1] == null) {
    lastIndex = i-1;
    break;
  }
}

data[lastIndex] = {
  x: data[lastIndex][0],
  y: data[lastIndex][1],
  z: data[lastIndex][2], 
  dataLabels: {enabled:true}
};

当我在图表选项中设置它时，它可以工作，但会显示所有值。我只想为最后一个值显示它。

显示最后值的股票图表

标签： javascripthighcharts

Answer 1

您可以使用dataLabel.formatter回调来实现想要的效果。

演示：https ://jsfiddle.net/BlackLabel/a8t3zhs9/

  formatter() {
    let points = this.series.points;
    if (this.x === points[points.length - 1].x) {
      return this.y
    }
  }

API：https ://api.highcharts.com/highcharts/series.line.dataLabels.formatter

编辑

---

@Nelie 升级的解决方案，可检测图表中的空点：https ://jsfiddle.net/1utz2x09/3/