Захват событий касания (touchstart и touchmove) в дополнение к движению мыши для синхронизации высоких графиков - PullRequest
Новая
       101

Захват событий касания (touchstart и touchmove) в дополнение к движению мыши для синхронизации высоких графиков

0 голосов
/ 09 апреля 2020

Я создаю основную c веб-страницу, которая отображает данные с метеостанции с несколькими синхронизированными старшими картами, с помощью других здесь и здесь Я смог реализовать полностью рабочую версию для систем на основе мыши (windows et c), как мне адаптировать приведенный ниже код, чтобы также захватывать события сенсорного запуска и сенсорного перемещения: 

//catch mousemove event and have all charts' crosshairs move along indicated values on x axis

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 = [],
      points2 = [],
      points3 = [],
      points4 = [],
      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,
      id: "myPlotLineId"
    });

    /*----- second chart ------*/
    var xAxis2 = chart2.xAxis[0];

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

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

    xAxis2.removePlotLine("myPlotLineId");
    xAxis2.addPlotLine({
      value: chart.xAxis[0].translate(x, true),
      width: 1,
      id: "myPlotLineId"
    });

    /*----- third chart ------*/
    var xAxis3 = chart3.xAxis[0];

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

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

    xAxis3.removePlotLine("myPlotLineId");
    xAxis3.addPlotLine({
      value: chart.xAxis[0].translate(x, true),
      width: 1,
      id: "myPlotLineId"
    });

    //if you have other charts that need to be syncronized - update their crosshair (plot line) in the same way in this function.                   
  });
}

Спасибо

1 Ответ

1 голос
/ 09 апреля 2020

Основываясь на этом примере из официальной демонстрационной базы Highcharts https://www.highcharts.com/demo/synchronized-charts Мне удалось обернуть аналогичный шаблон для вашего кода.

Демо: http://jsfiddle.net/BlackLabel/mnLzbe1s/

  ['mousemove', 'touchmove', 'touchstart'].forEach(function(eventType) {
    var container = $(chart.container),
      offset = container.offset(),
      x;
    container[0].addEventListener(eventType,
      (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 = [],
          points2 = [],
          points3 = [],
          e = chart1.pointer.normalize(evt); // Find coordinates within the chart

       ...
       })
     )
  })
...