f2 柱状图滚动 钉钉小程序_钉钉小程序图表库AntV - F2 使用总结

项目涉及图表部分的技术选型

对于图表这块的开发，使用一些流行的图表库可以大大提高我们的开发效率，目前较为流行的图表库大概有Echarts,Hcharts,AntV,他们都是大同小异，我印象比较深刻的是Hcharts是支持多坐标轴的，Echarts好像是不支持的，但是对于小程序的选择我们选择的是阿里的AntV-f2，因为他明确指出了适合小程序开发，而且AntV-f2除了不支持一些document，其他的大部分功能都是支持的，我们就没有再考虑其他的库，但是官方并没有太多关于小程序的具体使用文档，我们只能根据js的相关事例翻译成小程序的语法。

前期准备

AntV - F2的集成

安装f2

npm install @antv/f2 --save

安装my-f2 ,至于为什么要再包装一层my-f2，可以看下这篇文档 ： 聊一聊 F2 与小程序

npm install @antv/my-f2

开发前需要了解一些图表的api，比如tooltip、guide、legend、coord 等。具体可参考api文档。

屏幕快照 2019-07-27 上午10.01.26.png

完成以上步骤后我们先来集成一个折线图吧

1.通过canvas创建一个图表

id="am-mc-line-{ {$id}}"

height="{ {height}}"

width="{ {width}}"

onTouchStart="touchStart"

onTouchMove="touchMove"

onTouchEnd="touchEnd"

/>

this.chart = new F2.Chart({

el: canvas,