amCharts 4 - 如何在 JavaScript 中访问 XYChart 中当前悬停的系列数据/颜色

Question

我正在尝试通过 JavaScript 访问当前悬停的系列数据和颜色。数据可用于图例和工具提示，但我不确定如何直接访问它。

可以将图例放在外部容器中，但他们的代码创建了许多额外的容器/包装器，这使得格式化变得困难。 This Github question解决了它，但没有提供任何答案。

也许事件可用于检测图例文本或 tspan 元素中的更改，然后获取新文本，但我不确定如何执行此操作(使用 amCharts 事件)以及效率如何(尤其是多个系列和/或带有同步光标的图表)。

Another idea是根据光标位置获取数据，但这似乎效率低下( cursorpositionchanged 触发太频繁 - 即使系列数据没有改变，鼠标/光标移动也是如此)。也许它可以根据 dateAxis 值的变化更有效地完成？例如，使用 positionchanged事件监听器:

chart.cursor.lineX.events.on('positionchanged', function() {
    // get series data and do something with it
});

至少在使用 chart.cursor.xAxis = dateAxis 时, positionchanged事件似乎只在光标跳转到新值时触发。因此，它比触发鼠标/光标移动的事件更有效。

任何建议，将不胜感激。

更新

通过当前悬停，我指的是通过工具提示(例如)将鼠标悬停在图表上可访问的系列数据和颜色。

示例: CandlestickSeries和 LineSeries

Answer 1

您可以尝试的一种方法是设置 adapter为 tooltipText关于关注的对象。由于这可能会运行多次，尤其是通过图表光标，也许可以通过监视唯一值来跟踪工具提示的更改，例如在提供的样本中，这将是 date field 。您要查找的数据可以在适配器的 target.tooltipDataItem 中找到。 .如果在系列上，颜色将为 target.tooltipDataItem.component.fill (在线系列示例的情况下， target 是线系列并且没有颜色变化，因此您可以使用 target.fill )，否则例如在 CandleStick 系列的情况下，颜色将在烛台上，或 column ，即通过 target.tooltipDataItem.column.fill .

LineSeries 的示例适配器:

var tooltipDate;
series.adapter.add("tooltipText", function(text, target) {
  // data via target.tooltipDataItem.dataContext
  console.log('text adapter; color: ', target.tooltipDataItem.component.fill.hex);
  if (tooltipDate !== target.tooltipDataItem.dataContext.date) {
    console.log('new tooltip date, do something');
    tooltipDate = target.tooltipDataItem.dataContext.date;
  }
  // note: in this case: component === target 
  return text;
});

演示:

https://codepen.io/team/amcharts/pen/9f621f6a0e5d0441fe55b99a25094e2b

烛台系列适配器示例:

var tooltipDate;
series.adapter.add("tooltipText", function(text, target) {
  // data via target.tooltipDataItem.dataContext
  console.log('text adapter; color: ', target.tooltipDataItem.column.fill.hex);
  if (tooltipDate !== target.tooltipDataItem.dataContext.date) {
    console.log('new tooltip date, do something');
    tooltipDate = target.tooltipDataItem.dataContext.date;
  }
  return text;
});

演示:

https://codepen.io/team/amcharts/pen/80343b59241b72cf8246c266d70281a7

让我们知道这是否有意义，适配器路由是否是捕获更改、数据、颜色的好时间点，以及它是否足够有效地解决此问题。