Amcharts 4，xychart，限制工具提示的数量并将信息组合在一个工具提示中

Question

我正在使用 amcharts 4 来显示温度线。有时有很多站点，所以我希望只有一个工具提示，并且只是针对光标所在的值，而不是每一行都有一个工具提示（因为它们重叠并且有些不可读）。

并且可能有多个站点具有相同的温度，因此我必须在工具提示中列出所有站点。

有人知道如何实现吗？

在 amcharts 3 中，我使用附加到图表的 balloonFunction 来创建我自己的工具提示。但是我找不到如何使用 amcharts 4 中的系列来做到这一点。

感谢提示！

Answer 1

如果您系列的数据点具有不同的 x 值，则不可能将所有信息组合到一个工具提示中。

但如果它们具有相同的 x 值，您可以只为其中一个系列打开工具提示：

...,
series: [{
    type: "LineSeries",
    tooltipHTML: `xxx`,
    ...
}, {
    type: "LineSeries",
    ...
}, {
    type: "LineSeries",
    ...
}],
...

并且在工具提示 HTML 中，您可以访问数据：

...,
tooltipHTML: `
    <strong>Year: </strong>{year}<br />
    <strong>Cars: </strong>{cars}<br />
    <strong>Motorcycles: </strong>{motorcycles}<br />
    <strong>Bicycles: </strong>{bicycles}
`,
...

演示： http://jsfiddle.net/davidliang2008/aq9Laaew/286519/

Answer 2

因此，正如 David Liang 提到的那样，由于所有数据项都沿其 x 轴值（在本例中为日期时间）收敛，您可以通过仅设置一个系列来将工具提示限制为一个 tooltipText，并且它将可以通过 data placeholders 访问其余数据字段。例如。即使 series1 的 value 字段是 E852_t4m，它也可以通过 "{median_tBel}".

使用 series30 的值

但是，如果您想根据鼠标悬停在哪一行上获得工具提示，具体操作方法取决于您是否需要图表光标。

如果不需要，只需在行的项目符号上设置 tooltipText，例如

series1.bullets.getIndex(0).tooltipText = "{name} {valueY}°C";

这是 your fiddle 的演示：

https://codepen.io/team/amcharts/pen/803515896cf9df42310ecb7d8d7a2fb7

但是如果您需要图表光标，很遗憾目前没有支持的选项。有一种解决方法，但这不是最佳体验。您从执行上述操作开始。图表光标将触发所有线条及其项目符号的悬停效果，包括触发它们的工具提示。项目符号的工具提示实际上是它的系列（series1.bulletsContainer.children.getIndex(0).tooltip === series1.tooltip）。如果我们删除对项目符号工具提示的引用，例如series1.bullets.getIndex(0).tooltip = undefined;，图表将检查链并参考系列'。如果我们对系列'tooltip做同样的事情，它会沿着链上升到chart.tooltip，如果我们对所有系列都这样做，我们基本上把chart.tooltip变成了单例行为排序。但它对鼠标悬停没有那么敏感。

你会明白我在这个演示中的意思：

https://codepen.io/team/amcharts/pen/244ced223fe647ad6df889836da695a8

哦，同样在上面，您必须调整图表的工具提示以显示在项目符号的 left/right 上：

chart.tooltip.pointerOrientation = "horizontal";

编辑：

Since the first method sufficed, I've updated it with an adapter 检查范围内的其他字段。在适配器中，target 将是 CircleBullet，target.dataItem.valueY 是当前悬停的值，target.dataItem.dataContext 是同一日期的其他字段。

这就是我修改 tooltipText 以显示当前悬停项目符号 +/-0.5C 范围内的其他系列的方式：

// Provide a range of values for determining what you'll consider to be an "overlap"
// (instead of checking neighboring x/y coords.)
function inRange(valueA, rangeA, rangeB) {
  return valueA >= rangeA && valueA <= rangeB;
}

// Provide adapters for tooltipText so we can modify them on the fly
chart.series.each(function(series) {
  series.bullets
    .getIndex(0)
    .adapter.add("tooltipText", function(tooltipText, target) {
      // the other data fields will already match on the date/x axis, so skip
      // the date and this bullet's data fields.
      // (target.dataItem.component is the target's series.)
      var skipFields = ["date", target.dataItem.component.dataFields.valueY];
      // this bullet's value
      var hoveredValue = target.dataItem.valueY;
      // all the other data fields at this date
      var data = target.dataItem.dataContext;
      // flag for adding additional text before listing other nearby bullet values
      var otherPoints = false;
      Object.keys(target.dataItem.dataContext).forEach(function(field) {
        // if the field is neither date, nor bullet's
        if (!~skipFields.indexOf(field)) {
          if (inRange(data[field], hoveredValue - 0.5, hoveredValue + 0.5)) {
            if (!otherPoints) {
              tooltipText += "\n\nOthers:";
              otherPoints = true;
            }
            // Keep {data placeholder} notation to retain chart formatting features
            tooltipText += "\n" + field + ": {" + field + "}°C";
          }
        }
      });
      return tooltipText;
    });
});

Amcharts 4，xychart，限制工具提示的数量并将信息组合在一个工具提示中

Amcharts 4, xychart, limiting the number of tooltips and combining infos in one tooltip

tooltip

amcharts