小程序AntV F2可滑动折线图

最近在学习蚂蚁金服提供的一款可视化数据解决方案，对于小程序端可滑动折线图资料少之又少，官方提供的demo仅针对于移动端，故此博文记录小程序端可滑动折线图，大部分代码与基础折线图一致，只需添加少部分代码即可。

import F2 from '@antv/wx-f2';
let chart = null;
var name_list = [];

function initChart(canvas, width, height, F2) {
  const data = [{
      name: "张三",
      sales: "45",
      sort: 0
    },
    {
      name: "小夏",
      sales: "55",
      sort: 1
    },
    {
      name: "小黄",
      sales: "65",
      sort: 2
    },
    {
      name: "小兰",
      sales: "55",
      sort: 3
    },
    {
      name: "小资",
      sales: "50",
      sort: 4
    },
    {
      name: "王二",
      sales: "70",
      sort: 5
    },
    {
      name: "王2二",
      sales: "70",
      sort: 6
    },
    {
      name: "王a2二",
      sales: "70",
      sort: 7
    }
  ]
  data.map(function(item) {
    name_list.push(item.name)
  })
  var chart = new F2.Chart({
    el: canvas,
    width,
    height,
    animate: true
  })
  chart.source(data, {
    sort: {
      type: "linear",
      // 滚动条包含几个
      min: 0, 
      max: 5,
      // 传入不同的sort转换对应的名字
      formatter: function(val) {
        return name_list[val]
      }
    }

  });

  // chart.legend(true);

  chart.tooltip({
    showCrosshairs: true,
    showItemMarker: false,
  });

  chart.point().position("sort*sales")
  chart.line().position("sort*sales").shape('smooth').color("#999");
  // 按照x轴滑动
  chart.interaction('pan');
  // 定义进度条
  chart.scrollBar({
    mode: 'x',
    xStyle: {
      offsetY: -5
    }
  });
  chart.render()
  return chart
}

箭头所指即可滑动。接下来讲解如何实现：
①数据定义：sort和name都代表x轴数据，定义sort是为了讲数组转成对应的人名。此处截取部分数据

②载入数据这里市重点，将定义的的sort进行修改，min表示滚动轴（图片第一个箭头）从0到5，一共包含四个人名，如果最大是4则包含三个人名，至于为什么用这个，去看api；formatter函数接收不同的sort值返回name_list数组，此时name_list[0,1,2…],分别对应不同的人名

③定义的数据调用map方法，将sort对应的值返回相应的name

④红色箭头代表按照x轴滑动，黄色箭头定义进度条必须在点线画好之后。

以上是代码分解片段，也是实现滑动折线图重要步骤，注意name_list之前定义了空数组。