jquerymobile圖表插件支持

        很久沒寫博客了，終於有點時間來分享點東西。

        最近在做一個移動設備上的產品，之中用到圖表，在移動設備上用的，所以要儘量小巧，還要做觸摸支持。

        我們選用了jqflot然後我自己寫了觸摸支持，下面貼出觸摸支持的代碼及使用方法。

        源碼如下：

/* jquery.flot.touch.js
 * flot觸摸支持插件
 * 作者： 駱揚
 * 創建時間： 2012.03.28
 */
(function ($) {
  var options = {};

  function init(plot) {
    var prevCursor = 'default',
      prevPageX = 0,
      prevPageY = 0,
      panTimeout = null,
      dragGap = 3000,
      dragTimeout = null,
      drawing = null; //drawing修復拖動顯示紊亂的問題
    var placehoder = plot.getPlaceholder();

    function onTouchStart(e) {
      // 超過3秒的按下狀態纔算拖動
      dragTimeout = setTimeout(function () {
        dragTimeout = null;
      }, dragGap);
      if (e.originalEvent.touches.length == 1) {
        var c = placehoder.css('cursor');
        if (c) prevCursor = c;
        placehoder.css('cursor', plot.getOptions().pan.cursor);
        var touch = e.originalEvent.touches[0];
        prevPageX = touch.clientX;
        prevPageY = touch.clientY;
      }
    }

    function onTouchMove(e) {
      e.preventDefault();
      var frameRate = plot.getOptions().pan.frameRate;
      if (panTimeout || !frameRate) return;
      if (e.originalEvent.touches.length == 1) {
        var touch = e.originalEvent.touches[0];
        panTimeout = setTimeout(function () {
          if (!drawing) {
            drawing = true;
            plot.pan({
              left: prevPageX - touch.clientX,
              top: prevPageY - touch.clientY
            });
            drawing = null;
          }
          prevPageX = touch.clientX;
          prevPageY = touch.clientY;
          panTimeout = null;
        }, 1 / frameRate * 1000);
      } else {
        onTouchEnd(e);
      }
    }

    function onTouchEnd(e) {
      if (!dragTimeout) {
        e.preventDefault();
      } else {
        clearTimeout(dragTimeout);
        panTimeout = null;
      }
      if (e.originalEvent.touches.length == 1) {
        var touch = e.originalEvent.touches[0];
        if (panTimeout) {
          clearTimeout(panTimeout);
          panTimeout = null;
        }
        placehoder.css('cursor', prevCursor);
        //                plot.pan({ left: prevPageX - touch.clientX,
        //                    top: prevPageY - touch.clientY
        //                });
        if (!drawing) {
          drawing = true;
          plot.pan({
            left: prevPageX - touch.clientX,
            top: prevPageY - touch.clientY
          });
          drawing = null;
        }
      }
    }

    function bindEvents(plot) {
      placehoder.bind("touchstart", onTouchStart);
      placehoder.bind("touchmove", onTouchMove);
      placehoder.bind("touchend", onTouchEnd);
    }

    function shutdown(plot, eventHolder) {
      placehoder.unbind('touchstart');
      placehoder.unbind('touchmove');
      placehoder.unbind('touchend');
      if (panTimeout) clearTimeout(panTimeout);
    }
    plot.hooks.bindEvents.push(bindEvents);
    plot.hooks.shutdown.push(shutdown);
  };
  $.plot.plugins.push({
    init: init,
    options: options,
    name: 'touch',
    version: '1.0'
  });
})(jQuery);

        使用方法：

將上面代碼命名爲jquery.flot.touch.js

按照上面的順序引入就OK，不需要其他代碼，自動支持觸摸滑動。

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

我的應用，歡迎下載試玩：https://itunes.apple.com/cn/app/you-gou-yi-pin/id1109299811?l=en&mt=8