HighCharts -显示股票图表中最后一个值的dataLabel

xa9qqrwz  于 2022-11-10  发布在  Highcharts
关注(0)|答案(2)|浏览(282)

我想在图表上显示股票的最后价值
我已尝试添加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}
};

当我在图表选项中设置它时,它可以工作,但会为所有值显示它。我想只为最后一个值显示它。
Stock chart with last value visible

1cosmwyk

1cosmwyk1#

您可以使用dataLabel.formatter回调来实现所需的效果。
演示:https://jsfiddle.net/BlackLabel/a8t3zhs9/

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

应用编程接口:https://api.highcharts.com/highcharts/series.line.dataLabels.formatter
编辑
@Nelie升级解决方案,检测图表中的零点:https://jsfiddle.net/1utz2x09/3/

06odsfpq

06odsfpq2#

对我来说,另一个答案并没有像预期的那样起作用。我使用的是一个动态图表,我使用Highchart的series.addPoint(..) API函数动态地向图表添加点。使用上面的答案,dataLabel将随机消失。
所以,我做了一个小的实用函数,每次在series.addPoint(...)之后调用它。这个函数接受Highchart Series对象作为参数,可以使用const series = chart?.series[0];获得。这个实用函数也可以在绘制图表之后调用静态数据。

export function showLastPointDataLabel(series: Highcharts.Series) {
  series.points.forEach((point, index) => {
    if (index === (series.points.length - 1)) {
      // Only show data label for the last point
      point.update({
        dataLabels: {
          enabled: true
        }
      });
    } else {
      // Hide data label for other points
      point.update({
        dataLabels: {
          enabled: false
        }
      });
    }
  });
}

相关问题