当工具提示组合来自多个系列的数据时，如何以编程方式显示我的图表工具提示？ （同步图表）

Question

我构建了此演示http://jsbin.com/mewixi/5/edit?js,output以更好地揭露我的问题。

正如您所看到的，我有多个系列的多个图表。对于此演示目的，所有图表中的数据都是相同的，但在生产中不会出现这种情况。

所以，因为所有图表中的数据都是由一个共同的＆＃34; xCategory＆＃34;我想在图表上同步悬停操作，在所有图表中突出显示相同的xCategory，同时显示工具提示，其中包含所有系列的数据。

在第182行，如果你发表评论，你会发现我可以显示正在悬停的图表的格式化工具提示。如果你取消注释，你会看到我想要完成的更好的演示，但我不想展示单个系列的输出。

Highcharts.Point.prototype.highlight = function (event) {
        this.onMouseOver(); // Show the hover marker
        this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
        this.series.chart.tooltip.refresh([this]);
    };

有关如何在同一xCategory的所有图表中显示格式化工具提示的任何提示？

Answer 1

遍历图表中的所有系列，并在格式函数回调中构建工具提示，这些回调来自与悬停点具有相同类别的点。

formatter: function() {
      var s = [];
//      console.log(this.points);
      $.each(this.points, function(i, point) {
        var rangeValue;
        var series = point.series.chart.series;

        $.each(series, function(i, series) {
          $.each(series.data, function(j, p) {
            if (p.category === point.key) {
              if (p.high && p.low) {
                rangeValue = p.low + '~' + p.high;
              } else {
                rangeValue = p.y
              }
              s.push('<br/><span style="color:#D31B22;font-weight:bold;">' + series.name + ' : ' +
                rangeValue + '<span>');
            }
          });
        });

      });

      return s.join(' and ');
    },

示例：https://jsfiddle.net/ptezqnbf/2/