基于[wx-charts] line图（可拖动状态下）实现x轴的伸缩控制

实现line图 x轴伸缩控制（可拖动状态下）

我只是站在巨人的肩膀上而已
xiaolin3303前辈的源码_github

前言：

在使用wx-charts line图时，我传入了31组数据，显示效果如下图

可以发现我已经将数据精简了，但是看着还是很挤

然后我就想，要不，打开可拖动吧，然后就是下面这个样子（大概是吧）

难受了一会儿，想着看看有没有什么办法解决，于是去某歌搜了半天发现并没有人解决，又去看了看原作的讨论，发现也没人提出问题和解决方案。
其他 小程序的统计图，x轴能伸缩控制的我并没有找到
有些博客采用不可拖动的line图，然后扩宽canvas的长度，通过移动canvas来模拟实现。
我应用了一下，发现体验并不好，样子也不好看，没有那么数据化（看着很厉害）的感觉，然后决定给源码加点料。经过一天半研究，终于毛毛躁躁的实现了。
废话讲完了

正题

先来个效果图吧

实现方法

我找了半天控制着x轴单个点的宽度的参数

其中红色框中部分是修改过后的
dataCount为x轴的个数，
作者判断了opts.enableScroll（拖动）是否开启，
原来的代码是如果开启，则取5和categories（x轴的个数)的最小值，没错就是5！硬生生的5。
分析一波，canvas的长度为spacevalid（合法宽度），dataCount时x轴点的个数，而eachSpacing为x轴单个点的宽度。
总之就是 在开启拖动状态下，canvas画出来的x轴的总长度为 x轴点的个数 x 单个点的宽度
而eachSpacing = canvas长度 / 点的个数 。所以只要减小点的个数就能增加x轴的总长度。

暴露出控制参数。

控制参数为flex，我写的时flex，至于如何向外暴露，有两种办法，一种是直接给Charts对象添加方法，但是我发现源码中有个叫updateData的方法，用于更新数据，然后重新画图。
那直接在updateData中添加这个参数flex用于控制x轴的宽度，然后对外接受参数就行。

红框中是新添加代码。至于为什么要重置距离，我发现在更新数据后，原来如果你拖动过x轴，那么再点的时候会有一瞬间的跳转，感觉体验不是很好。（我那么多废话反正也讲不清楚，要写就对了）

然后再构造函数里加个属性，简单做一下数据封装

最后

如果看懂了最好，没看懂就算了，也可以自己去源码里对比着看看。
管他的 你拿去用就是，出bug不负责。
这个扩展只实现了我想要实现的功能，并没有做好封装。

使用方法

在基于line图 开启可拖动的情况下
在构造函数中传入flex值，默认为1，取值[1,2)，看懂了修改方法的可以自行去源码设置你想要的方案。

chartDraw: function(obj) {
    var that = this;
    var windowWidth = 320;
    try {
      var res = wx.getSystemInfoSync();
      windowWidth = res.windowWidth;
    } catch (e) {
      console.error('getSystemInfoSync failed!');
    }
    lineChart = new wxCharts({
      canvasId: 'lineCanvas',
      type: 'line',
      categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
      animation: true,
      series: [{
        name: obj.mNumL + '月',
        color: "#fbbe05",
        data: obj.chartLast.data,
        format: function(val, name) {
          return val;
        }
      }, {
        name: obj.mNumS + '月',
        color: "#4486f4",
        data: obj.chartSelcet.data,
        format: function(val, name) {
          return val;
        }
      }],
      xAxis: {
        type: 'calibration',
      },
      yAxis: {
        title: '考勤时长(分钟)',
        format: function(val) {
          return val.toFixed();
        },
        min: 0
      },
      width: windowWidth,
      height: 300,
      dataLabel: true,
      dataPointShape: true,
      enableScroll: true,
      //[1,2)
      flex: that.data.flex,//这个这个这个这个这个这个这个这个这个这个这个这个
      extra: {
        lineStyle: 'curve'
      }
    });
  },

然后写个事件，用于控制flex，并且调用linechart.updateData修改参数

flex: function(e) {
    var that = this,
      flex = that.data.flex;
    if (e.currentTarget.dataset.state === 'minus') {
      flex -= 0.1;
      flex = flex <= 1 ? 1 : flex;
    } else {
      flex += 0.1;
      flex = flex >= 2 ? 1.9 : flex;
    }
    //节流
    setTimeout(function() {
      that.setData({
        flex: flex,
      });
      lineChart.updateData({
        flex: flex,
      });
      wx.setStorage({
        key: 'flex',
        data: flex,
      })
    }, 200)
  },

最后的最后，不要问怎么用这个插件，使用文档都在原作者GitHub上，劳烦去看一看。