AmCharts 5 获取光标X轴日期值求助及工具选型咨询

我是AmCharts 5的新手，需要帮助获取光标对应的X轴实际日期值（X轴为日期类型）。我找到了适用于AmCharts 4的有用示例，但没有能用于AmCharts 5的可行方案，这应该是一项基础需求吧？另外，您是否推荐我使用HighCharts或AmCharts 4呢？

以下是我目前编写的代码：

cursor.events.on("cursormoved", function(ev) {
  console.log(ev);
  console.log("x: ", ev.target.chart.xAxes.getIndex(0));
  // not working : console.log("x: ", xAxis.positionToDate(xAxis.toAxisPosition(ev.target.xPosition)));
  // not working : console.log("y: ", yAxis.positionToValue(yAxis.toAxisPosition(ev.target.yPosition)));
});

我的图表及光标样式如下：

一、AmCharts 5中获取光标对应X轴日期值的解决方案 #

AmCharts 5的轴值转换逻辑和AmCharts 4有差异，以下两种方式可以解决你的问题：

1. 通过轴位置转换获取日期
   先提前获取X轴实例，再将光标位置转换为轴坐标，最后通过日期轴专属方法提取日期：

// 初始化时获取X轴实例
const xAxis = chart.xAxes.getIndex(0);
const yAxis = chart.yAxes.getIndex(0);

cursor.events.on("cursormoved", function(ev) {
  // 转换光标位置为轴坐标
  const xAxisPos = xAxis.toAxisPosition(ev.target.xPosition);
  // 日期轴用positionToDate获取对应日期
  const targetDate = xAxis.positionToDate(xAxisPos);
  console.log("光标对应X轴日期:", targetDate);

  // Y轴数值获取逻辑（如果需要）
  const yAxisPos = yAxis.toAxisPosition(ev.target.yPosition);
  const targetYValue = yAxis.positionToValue(yAxisPos);
  console.log("光标对应Y轴数值:", targetYValue);
});

2. 直接获取光标指向的数据点
   如果光标绑定了图表系列，可直接从数据点中提取日期值，更直观：

cursor.events.on("cursormoved", function(ev) {
  const activePoint = ev.target.get("point");
  if (activePoint) {
    // 假设你的数据中日期字段为"date"，需根据实际字段名调整
    const targetDate = activePoint.dataItem.dataContext.date;
    console.log("光标对应X轴日期:", targetDate);
  }
});

二、工具选择建议：AmCharts 5 vs AmCharts 4 vs HighCharts #

• AmCharts 5：作为最新版本，重构了底层架构，性能优化明显，支持更多现代特性（如SVG渲染优化、响应式适配），官方持续维护。新项目优先推荐使用，虽然初期资源不如旧版本多，但官方文档和社区正在快速完善。
• AmCharts 4：生态成熟、示例丰富，但官方已停止新特性开发，仅做bug修复，适合维护旧项目，不建议新项目选用。
• HighCharts：功能全面、文档和社区生态完善，学习成本低，快速开发场景适配性强。但需注意商业授权限制（非开源项目需付费），如果对授权成本敏感或需要AmCharts专属特性，可优先考虑前者。

总结：新项目优先选AmCharts 5或HighCharts，根据授权需求和特性偏好决定；旧项目维护继续用AmCharts 4即可。

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