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

您可以尝试的一种方法是在关注的对象上为tooltipText设置adapter。由于这可能会多次运行（尤其是通过图表光标运行），因此可能会通过监视唯一值（例如，样本中提供的date字段。您要查找的数据可以在适配器的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

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

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

1 个答案: