Question

我有三个图表。所有图表均具有相同的x轴，并具有链接的工具提示。 https://codepen.io/austeng/pen/gOppRWY

function syncronizeCrossHairs(chart) {
  var container = $(chart.container),
      offset = container.offset(),
      x, y;

  container.mousemove(function (evt) {

    x = evt.clientX - chart.plotLeft - offset.left;
    y = evt.clientY - chart.plotTop - offset.top;
    var xAxis = chart.xAxis[0];
    var xVal = xAxis.toValue(x, true);

    var chart1_points = chart1.series[0].points;
    Highcharts.each(chart1_points, function (point, i) {
      if (i + 1 < chart1_points.length && point.x <= xVal && chart1_points[i + 1].x > xVal) {

        point.setState();
        chart1_points[i + 1].setState();

        if (xVal - point.x <= chart1_points[i + 1].x - xVal) {
          chart1.tooltip.refresh(point);
          point.setState('hover');
        } else {
          chart1.tooltip.refresh(chart1_points[i + 1]);
          chart1_points[i + 1].setState('hover');
        }
      }
    });

    var chart2_points = chart2.series[0].points;
    Highcharts.each(chart2_points, function (point, i) {
      if (i + 1 < chart2_points.length && point.x <= xVal && chart2_points[i + 1].x > xVal) {

        point.setState();
        chart2_points[i + 1].setState();

        if (xVal - point.x <= chart2_points[i + 1].x - xVal) {
          chart2.tooltip.refresh(point);
          point.setState('hover');
        } else {
          chart2.tooltip.refresh(chart2_points[i + 1]);
          chart2_points[i + 1].setState('hover');
        }
      }
    });

    var chart3_points = chart3.series[0].points;
    Highcharts.each(chart3_points, function (point, i) {
      if (i + 1 < chart3_points.length && point.x <= xVal && chart3_points[i + 1].x > xVal) {

        point.setState();
        chart3_points[i + 1].setState();

        if (xVal - point.x <= chart3_points[i + 1].x - xVal) {
          chart3.tooltip.refresh(point);
          point.setState('hover');
        } else {
          chart3.tooltip.refresh(chart3_points[i + 1]);
          chart3_points[i + 1].setState('hover');
        }
      }
    });
  });
}

我的问题是，我可以使用其他图表中的数据填充当前正在停留的工具提示吗？例如，如果我将鼠标悬停在2017年7月12日的图表1上，则会看到以下工具提示：功率：95.60，强度：0.32（2017年7月12日的图表2数据）和速度：0.90（图表3的数据） 2017年7月12日）。

我知道在Highcharts中可以设置一个序列对象，其中每个数据点都是一个哈希，然后可以将额外的值传递给工具提示，但是我不确定如何将该方法应用于本示例。

感谢任何提示！

Answer 1

例如，您可以在pointFormatter函数中定义工具提示结构，例如：

 pointFormatter: function() {
   var thisChart = this.series.chart,
     pointIndex = this.index,
     point,
     result = '';

   if (thisChart === Highcharts.charts[Highcharts.hoverChartIndex]) {
     Highcharts.charts.forEach(function(chart) {
       point = chart.series[0].points[pointIndex];

       result += '<span style="color:' + point.color + '">●</span> ' + point.series.name + ': <b>' + point.y + '</b><br/>'
     });

   } else {
    result = '<span style="color:' + this.color + '">●</span> ' + this.series.name + ': <b>' + this.y + '</b><br/>'
   }

   return result;
 }

实时演示： http://jsfiddle.net/BlackLabel/6m4e8x0y/4814/

API参考： https://api.highcharts.com/highcharts/tooltip.pointFormatter

使用其他图表中的数据填充Highcharts工具提示

1 个答案: