将 Flot 与 Zepto 结合使用答案

【问题标题】：Combine Flot with Zepto将 Flot 与 Zepto 结合使用
【发布时间】：2017-01-11 15:38:30
【问题描述】：

是否可以将 Zepto 与 Flot 一起使用？如何使用？

我知道 Flot 在 jQuery 上运行良好（经过测试），但 Zepto 在移动设备上比 jQuery 感觉更快、更流畅

【问题讨论】：

【解决方案1】：

我试过了，遇到了两个问题。首先，flot 查找要定义的 jQuery，其次，flot 使用 outerWidth，而 zepto 不使用 replicate。

所以，让我们给它一点爱并解决这些问题：

<!DOCTYPE html>
<html>

<head>
  <script>
  </script>
  <!-- Load Zepto -->
  <script data-require="zepto@1.1.4" data-semver="1.1.4" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.min.js"></script>
  <!-- patch in the things we need -->
  <script>
     // define jquery
    jQuery = $;
    // create outerWidth/Height functions
    // stolen from here: https://gist.github.com/pamelafox/1379704
    ['width', 'height'].forEach(function(dimension) {
      var offset, Dimension = dimension.replace(/./, function(m) {
        return m[0].toUpperCase()
      });
      $.fn['outer' + Dimension] = function(margin) {
        var elem = this;
        if (elem) {
          var size = elem[dimension]();
          var sides = {
            'width': ['left', 'right'],
            'height': ['top', 'bottom']
          };
          sides[dimension].forEach(function(side) {
            if (margin) size += parseInt(elem.css('margin-' + side), 10);
          });
          return size;
        } else {
          return null;
        }
      };
    });
  </script>
  <!-- now we can include flot -->
  <script data-require="flot@0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
</head>

<body>
  <div id="placeholder" style="width:300px;height:300px"></div>
  <script>
    $(function() {

      var d1 = [];
      for (var i = 0; i < 14; i += 0.5) {
        d1.push([i, Math.sin(i)]);
      }

      var d2 = [
        [0, 3],
        [4, 8],
        [8, 5],
        [9, 13]
      ];

      // A null signifies separate line segments
      var d3 = [
        [0, 12],
        [7, 12], null, [7, 2.5],
        [12, 2.5]
      ];

      $.plot("#placeholder", [d1, d2, d3]);
    });
  </script>
</body>

</html>

【讨论】：