Problems implementing synchronized plotline and tooltips for highcharts

问题

I'm trying to implement synchronized highcharts as in this jsfiddle http://jsfiddle.net/j7hk1802/ but I'm having problems.

The synchronized plotline only shows at the very left or right of the plots (where there is no data), as soon as I move the plot line to where there is data the synchronization breaks and I start getting a lot of console errors:

highcharts.src.js:21444 Uncaught TypeError: (c || []).forEach is not a function
    at n.applyInactiveState (highcharts.src.js:21444)
    at e.refresh (highcharts.src.js:20820)
    at test2.html:119
    at Array.forEach (<anonymous>)
    at Object.d.<computed> [as each] (highcharts.src.js:2207)
    at HTMLDivElement.<anonymous> (test2.html:112)
    at HTMLDivElement.dispatch (jquery-latest.js:4641)
    at HTMLDivElement.elemData.handle (jquery-latest.js:4309)

This relates to the following code:

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);
    //remove old plot line and draw new plot line (crosshair) for this chart
    var xAxis1 = chart1.xAxis[0];
    var points1 = chart1.series[0].points;

    Highcharts.each(points1, function(point, i) {
      if (i + 1 < points1.length && point.x <= xVal && points1[i + 1].x > xVal) {
        //reset state
        point.setState();
        points1[i + 1].setState();

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

I've tried to create a jsfiddle to replicate the error, but I'm still struggling to get functioning charts to show in jsfiddle, however my attempt can be found here: https://jsfiddle.net/ashenshugar/a72csgro/6/

I'd really appreciate some help as this is the last step I need to be able to create dynamic charts for my weather data.

Sebastian Wędzel's solution below works to remove the console errors, however the first chart is synchronizing to a different entry to the other charts:

Also the tooltips for the 3rd and 4th charts I've added aren't showing the correct series, I'm sure I've not updated the code correctly for these charts, but can't see my error.

My new code is here https://jsfiddle.net/ashenshugar/sj90gw4x/3/

回答1:

The problem which you are struggling to is that you pasted only one point as an argument into the tooltip.refresh function, meanwhile shared tooltip requires an array of points which should be displayed. I do some changes to fit your custom code with the shared tooltip.

Demo: https://jsfiddle.net/BlackLabel/yrkjvft2/

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

  container.mousemove(function(evt) {
    x = evt.clientX - chart.plotLeft - offset.left;
    //remove old plot line and draw new plot line (crosshair) for this chart
    var xAxis1 = chart1.xAxis[0],
      points = [],
      points1 = [],
      e = chart1.pointer.normalize(evt); // Find coordinates within the chart   

    chart1.series.forEach(s => {
      var point = s.searchPoint(e, true)
      if (point) {
        point.setState();
        points.push(point)
      }
    })

    if (points) {
      var number = 0;
      Highcharts.each(points, function(p, i) {
        if (!p.series.visible) {
          points.splice(i - number, 1);
          number++;
        }
      })
      if (points.length) {
        chart1.tooltip.refresh(points); // Show the tooltip
      }
    }

    xAxis1.removePlotLine("myPlotLineId");
    xAxis1.addPlotLine({
      value: chart.xAxis[0].translate(x, true),
      width: 1,
      color: 'red',
      //dashStyle: 'dash',                   
      id: "myPlotLineId"
    });
...

回答2:

The updated code to display the correct tooltips for all four charts is here jsfiddle.net/BlackLabel/61bs9nfq and was provided by Sebastian Wędzel.

In order to fix the alignment issue caused by different sized axis labels you must specify the same sized left and right margins for all charts as follows

chart: {
      marginLeft: 100, //size of left margin in pixels
      marginRight: 100, //size of right margin in pixels
      }

来源：https://stackoverflow.com/questions/61066121/problems-implementing-synchronized-plotline-and-tooltips-for-highcharts

标签

json

Highcharts