在iPhone / iPad或任何可触摸设备的高图中触摸事件支持 [英] touch event support in highchart for iphone/ipads or any touchable devices

问题描述

我有一个要求，用户可以通过点击和触摸事件在高图上绘制/添加系列，指标，线条。

以下是 http：// www。 highcharts.com/documentation/compatibility

highcharts api不直接支持touch事件。

我可以得到任何建议吗？

解决方案

自己出来。如果您需要highcharts中的touch事件支持，那么这里是代码。

  Highcharts.Chart.prototype.callbacks.push（函数（图表）{
 var hasTouch = hasTouch = document.documentElement.ontouchstart！== undefined，
 mouseTracker = chart.tracker，
 container = chart.container，
 mouseMove; 
 
 mouseMove = function（e）{
 //让系统处理多点触控操作，如两个手指滚动
 //并捏住
 if（e&& e.touches& e.touches.length> 1）{
 return; 
} 
 
 // normalize 
e = mouseTracker.normalizeMouseEvent（e） ; 
 if（！hasTouch）{// not for touch devices 
 e.returnValue = false; 
} 
 
 var chartX = e.chartX，
 chartY = e.chartY，
 isOutsidePlot =！chart.isInsidePlot（chartX  -  chart.plotLeft，chartY  -  chart.plotTop）; 
 
 //在
之外的鼠标取消if （isOutsi如果（！lastWasOutsidePlot）{
 //重置跟踪器
 resetTracker（）; 
} * / 
 
 //删除选择项并重置mouseIsDown和hasDragged 
 // drop（）; 
 if（chartX< chart.plotLeft）{
 chartX = chart.plotLeft; 
} else if（chartX> chart.plotLeft + chart.plotWidth）{
 chartX = chart.plotLeft + chart.plotWidth; 
} 
 
 if（chartY< chart.plotTop）{
 chartY = chart.plotTop; 
} else if（chartY> chart.plotTop + chart.plotHeight）{
 chartY = chart.plotTop + chart.plotHeight; 
 
 
 
 if（chart.mouseIsDown&& e.type！=='touchstart'）{//选择
 
 //确定鼠标是否移动超过10px 
 hasDragged = Math.sqrt（
 Math.pow（mouseTracker.mouseDownX  -  chartX，2）+ 
 Math.pow（mouseTracker.mouseDownY  - chartY，2）
）; 
 if（hasDragged> 10）{
 var clickedInside = chart.isInsidePlot（mouseTracker.mouseDownX  -  chart.plotLeft，mouseTracker.mouseDownY  -  chart.plotTop）; 
 
 //作出选择
 if（chart.hasCartesianSeries&&（mouseTracker.zoomX || mouseTracker.zoomY）&&& clickedInside）{
 if（！ mouseTracker.selectionMarker）{
 mouseTracker.selectionMarker = chart.renderer.rect（
 chart.plotLeft，
 chart.plotTop，
 zoomHor？1：chart.plotWidth，
 zoomVert？1：chart.plotHeight，
 0 
）
 .attr（{
 fill：mouseTracker.options.chart.selectionMarkerFill ||'rgba（69,114,167,0.25）' ，
 zIndex：7 
}）
 .add（）; 
 
 
 
 //调整选择标记的宽度
 if（mouseTracker.selectionMarker&& zoomHor）{
 var xSize = chartX  -  mouseTracker.mouseDownX; 
 mouseTracker.selectionMarker.attr（{
 width：mathAbs（xSize），
 x：（xSize> 0？0：xSize）+ mouseTracker.mouseDownX 
}）; 
} 
 //调整选择标记的高度
 if（mouseTracker.selectionMarker&& zoomVert）{
 var ySize = chartY  -  mouseTracker.mouseDownY; 
 mouseTracker.selectionMarker.attr（{
 height：mathAbs（ySize），
 y：（ySize> 0？0：ySize）+ mouseTracker.mouseDownY 
}）; 
} 
 
 //平移
 if（clickedInside&&！mouseTracker.selectionMarker&&mouseTracker.options.chart.panning）{
图表。锅（chartX）; 
} 
} 
 
} else if（！isOutsidePlot）{
 //显示工具提示
 mouseTracker.onmousemove（e）; 
} 
 
 lastWasOutsidePlot = isOutsidePlot; 
} 
 
 container.onmousemove = container.ontouchstart = container.ontouchmove = mouseMove; 
}）; 
  

只需将它保存在JavaScript文件中并将其包含在您的网页中即可。您不需要创建或使用任何变量。您可以在此处找到原始文件。谢谢。

I have a requirement where user is able to draw/add series,indicators,lines on highcharts both by click and touch events.

Here is the link http://www.highcharts.com/documentation/compatibility

The touch events are not directly supported by highcharts api.

May I get any suggestions?

解决方案

And I figure it out by myself. If you need the touch events support in highcharts then, here is the code.

Highcharts.Chart.prototype.callbacks.push(function(chart) {
  var hasTouch = hasTouch = document.documentElement.ontouchstart !== undefined,
      mouseTracker = chart.tracker,
      container = chart.container,
      mouseMove;

  mouseMove = function (e) {
    // let the system handle multitouch operations like two finger scroll
    // and pinching
    if (e && e.touches && e.touches.length > 1) {
      return;
    }

    // normalize
    e = mouseTracker.normalizeMouseEvent(e);
    if (!hasTouch) { // not for touch devices
      e.returnValue = false;
    }

    var chartX = e.chartX,
      chartY = e.chartY,
      isOutsidePlot = !chart.isInsidePlot(chartX - chart.plotLeft, chartY - chart.plotTop);

    // cancel on mouse outside
    if (isOutsidePlot) {

      /*if (!lastWasOutsidePlot) {
        // reset the tracker
        resetTracker();
      }*/

      // drop the selection if any and reset mouseIsDown and hasDragged
      //drop();
      if (chartX < chart.plotLeft) {
        chartX = chart.plotLeft;
      } else if (chartX > chart.plotLeft + chart.plotWidth) {
        chartX = chart.plotLeft + chart.plotWidth;
      }

      if (chartY < chart.plotTop) {
        chartY = chart.plotTop;
      } else if (chartY > chart.plotTop + chart.plotHeight) {
        chartY = chart.plotTop + chart.plotHeight;
      }
    }

    if (chart.mouseIsDown && e.type !== 'touchstart') { // make selection

      // determine if the mouse has moved more than 10px
      hasDragged = Math.sqrt(
        Math.pow(mouseTracker.mouseDownX - chartX, 2) +
        Math.pow(mouseTracker.mouseDownY - chartY, 2)
      );
      if (hasDragged > 10) {
        var clickedInside = chart.isInsidePlot(mouseTracker.mouseDownX - chart.plotLeft, mouseTracker.mouseDownY - chart.plotTop);

        // make a selection
        if (chart.hasCartesianSeries && (mouseTracker.zoomX || mouseTracker.zoomY) && clickedInside) {
          if (!mouseTracker.selectionMarker) {
            mouseTracker.selectionMarker = chart.renderer.rect(
              chart.plotLeft,
              chart.plotTop,
              zoomHor ? 1 : chart.plotWidth,
              zoomVert ? 1 : chart.plotHeight,
              0
            )
            .attr({
              fill: mouseTracker.options.chart.selectionMarkerFill || 'rgba(69,114,167,0.25)',
              zIndex: 7
            })
            .add();
          }
        }

        // adjust the width of the selection marker
        if (mouseTracker.selectionMarker && zoomHor) {
          var xSize = chartX - mouseTracker.mouseDownX;
          mouseTracker.selectionMarker.attr({
            width: mathAbs(xSize),
            x: (xSize > 0 ? 0 : xSize) + mouseTracker.mouseDownX
          });
        }
        // adjust the height of the selection marker
        if (mouseTracker.selectionMarker && zoomVert) {
          var ySize = chartY - mouseTracker.mouseDownY;
          mouseTracker.selectionMarker.attr({
            height: mathAbs(ySize),
            y: (ySize > 0 ? 0 : ySize) + mouseTracker.mouseDownY
          });
        }

        // panning
        if (clickedInside && !mouseTracker.selectionMarker && mouseTracker.options.chart.panning) {
          chart.pan(chartX);
        }
      }

    } else if (!isOutsidePlot) {
      // show the tooltip
      mouseTracker.onmousemove(e);
    }

    lastWasOutsidePlot = isOutsidePlot;
  }

  container.onmousemove = container.ontouchstart = container.ontouchmove = mouseMove;
});

Just save it in a javascript file and include it in your webpage. You don't need to create or use any variable. You can find the original file here. Thanks.

这篇关于在iPhone / iPad或任何可触摸设备的高图中触摸事件支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！