AmCharts 4 折线图LineSeries加载CSV数据时如何显示末尾数值标签

解决方法 #

问题核心是CSV为异步加载，初始化阶段图表数据未填充，你可以通过监听数据源的done事件，在每次数据加载完成后再更新轴范围的数值，同时针对你提供的CSV日期倒序的情况，需要先对数据做升序排序再取末尾值，避免取到最早日期的数值。

你只需要在现有代码末尾添加以下代码即可：

// 监听CSV数据加载完成事件
chart.dataSource.events.on("done", function() {
  if (!chart.data || chart.data.length === 0) return;
  // 对数据按日期升序排序，适配CSV内日期倒序的情况
  chart.data.sort(function(a, b) {
    return new Date(a.date) - new Date(b.date);
  });
  // 获取最新数据的visits值
  const lastVisits = chart.data[chart.data.length - 1].visits;
  // 更新轴范围数值和标签
  range.value = lastVisits;
  range.label.text = lastVisits.toString();
});

适配说明 #

你原有注释的range.value = chart.data[chart.data.length - 1].visits;无需开启，上述逻辑会在每次CSV加载（包括你配置的1秒自动重载）完成后自动执行，始终显示最新的末尾数值。

内容的提问来源于stack exchange，提问作者Raihan