Amcharts 4，xychart，限制工具提示的数量并将信息合并到一个工具提示中 [英] Amcharts 4, xychart, limiting the number of tooltips and combining infos in one tooltip

问题描述

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

I am using amcharts 4 to display temperature lines. At times there are many stations so I would like to have just one tooltip and just for the value the cursor is at instead of one tooltip for every line (because then they overlap and some are unreadable).

可能会有几个温度相同的站点，所以我必须在工具提示中列出所有这些站点.

And there might be several stations with the same temperature so I would have to list all of them in the tooltip.

有人知道如何实现这一目标吗?

Anyone knows how to achieve that?

在amcharts 3中，我使用了附在图表上的BalloonFunction来创建自己的工具提示.但是我仍然找不到在amcharts 4中的系列如何做.

In amcharts 3 I used a balloonFunction attached to the graphs to create my own tooltip. But yet I couldn't find how to do it with the series in amcharts 4.

谢谢您的提示！

推荐答案

因此，正如David Liang提到的那样，由于所有数据项都沿其x轴值(在这种情况下为日期时间)收敛，因此可以通过以下方式将工具提示限制为一个仅设置一个系列的tooltipText，它将可以通过放入"{median_tBel}"即可使用series30的值.

So as David Liang mentioned, since all the data items converge along their x axis value (a datetime in this case), you can limit tooltips down to one by only setting one series' tooltipText, and it will have access to the rest of the data fields via data placeholders. E.g. even though series1's value field is E852_t4m, it can use series30's value by just putting "{median_tBel}".

但是，如果要根据所悬停的行提供工具提示，该如何操作取决于是否需要图表光标.

But if you want to have a tooltip based on which line you're hovering over, how to do that depends whether or not you require the Chart Cursor.

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

If you don't need it, simply set the tooltipText on the line's bullets, e.g.

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

以下是您的小提琴的演示

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

但是，如果您需要Chart Cursor，则不幸的是目前没有受支持的选项.有一种解决方法，但这不是最好的体验.您首先要进行上述操作.图表光标将触发所有线条及其项目符号上的悬停效果，包括触发其工具提示.项目符号的工具提示实际上是它的系列"(series1.bulletsContainer.children.getIndex(0).tooltip === series1.tooltip).如果我们删除对项目符号工具提示的引用，例如series1.bullets.getIndex(0).tooltip = undefined;，图表将检查链条，并始终引用系列.如果对系列tooltip做同样的操作，它将上升到chart.tooltip链，如果对所有系列都进行此操作，则基本上将chart.tooltip变成某种单例行为.但这对鼠标悬停的反应不是那么快.

But if you require Chart Cursor, unfortunately there isn't a supported option at the moment. There's a kind of workaround but it's not the best experience. You start with doing the above. The Chart Cursor will trigger hover effects on all lines and their bullets, including triggering their tooltips. A bullet's tooltip is actually its series' (series1.bulletsContainer.children.getIndex(0).tooltip === series1.tooltip). If we remove the reference to the bullet's tooltip, e.g. series1.bullets.getIndex(0).tooltip = undefined;, the chart will check up the chain and refer to series' anyway. If we do the same to the series' tooltip, it'll go up the chain to chart.tooltip, if we do this to all series, we basically turn chart.tooltip into a singleton behavior of sorts. But it's not as responsive to mouseovers.

您将了解此演示的意思:

You'll see what I mean with this demo:

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

哦，也是在上面，您必须使用以下命令调整图表的工具提示以显示在项目符号的左侧/右侧:

Oh, also in the above, you'll have to adjust the chart's tooltip to appear on the left/right of bullets with this:

chart.tooltip.pointerOrientation = "horizontal";

由于第一种方法已足够，因此我已经用 href ="https://www.amcharts.com/docs/v4/concepts/adapters/" rel ="nofollow noreferrer">适配器，用于检查范围内的其他字段.在适配器中，target将是CircleBullet，target.dataItem.valueY是当前悬停的值，而target.dataItem.dataContext是同一日期的其他字段.

Since the first method sufficed, I've updated it with an adapter that checks for other fields in range. In the adapter, the target will be the CircleBullet, target.dataItem.valueY is the currently hovered value, and target.dataItem.dataContext are the other fields at the same date.

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

This is how I modified tooltipText to show other series within +/-0.5C range of the currently-hovered bullet:

// 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，限制工具提示的数量并将信息合并到一个工具提示中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！