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,
width,
height,
padding,
appendPadding,
});
2.渲染图表的source、tooltip、legend、axis等属性
this.chart.tooltip(tooltip); /// 可参考tooltip的Api设置对应的属性
this.chart.legend(legend); /// 可参考legend的Api设置对应的属性
this.chart.source(data);
/// 折线图的绘制
this.chart.line().position('key*value').color('#999')
效果预览
屏幕快照 2019-07-27 上午10.53.42.png
效果看着有点丑对不对......那我们就来实现一下设计师的效果图吧！具体功能：1.默认展示一个tooltip, 2.tooltip改变时展示对应x轴的数据，3.自定义tooltip
默认展示一个tooltip
我们自定义一个默认的tooltip:, 就叫做def_item吧，当图表渲染完成设置def_item = {key: 100, value: 200},这里有个注意点，就是def_item的内容不是随便定义的，这里我们先不做多说，后面会说明这个def_item的key值时如何设置的。
/// 设置默认的tooltip
chart.tooltip(tooltip);
if (tooltip) {
setTimeout(() => {
if (tooltip.def_item) {
var item = tooltip.def_item; // 要展示 tooltip 的数据
var point = chart.getPosition(item); // 获取该数据的画布坐标
chart.showTooltip(point);
}
}, 500)
}
/// 网络请求成功，设置def_item
this.setData({
tooltip: {
showTitle: true,
showCrosshairs: true,
def_item: {key: '2017-06-07', value: 135}
},
})
通过监听tooltip的改变，设置我们需要的指定x轴的数据，同时可以自定义tooltip
通过查找tooltip的Api我们会发现它有3个事件的回调，在钉钉小程序中我们只能通过props来传递tooltip的回调
onShow(obj) {
// obj: { x, y, title, items }
}, // tooltip 显示时的回调函数
onHide(obj) {
// obj: { x, y, title, items }
}, // tooltip 隐藏时的回调函数
onChange(obj) {
// obj: { x, y, title, items }
},
/// 引入到小从程序中
chart.tooltip({
showCrosshairs: tooltip.showCrosshairs,
showTitle: tooltip.showTitle,
showItemMarker: tooltip.showItemMarker,
background: tooltip.background,
crosshairsStyle: tooltip.crosshairsStyle,
tooltipMarkerStyle: tooltip.tooltipMarkerStyle,
onChange(ev) {
console.log(ev, 8888)
// 通过这个打印我们可以看到具体的信息，这个信息和上面我们说的def_item的设置是有关联的，
// 我们展开这个ev的信息，可以看到item[0]下的信息: origin:{key: "2017-06-15", value: 245, type: "legend1"}
// 这个origin中的key和value就是和def_item中的一一对应的。如果不是，那就无法定位默认值。
// 同时，这个origin中的key和value是源自于我们最初初始化折线图设置的key和value， this.chart.line().position('key*value').color('#999')
if (props.onTooltipChange) {
props.onTooltipChange(ev)
}
}
});
优化后的效果
28.gif
上面记录了折线图的一些自定义效果，其他图表的扩展也跟折线图差不多，大家花时间研究就好。下面我们再参考F2的js示例封装一个小程序的组合图表。效果如下：
屏幕快照 2019-07-27 下午12.12.44.png
1.自定义legend,自定义的legend在小程序端，无法实现点击效果。
const legendItems = [{
name: '个人分数',
marker: 'square',
fill: '#7B74FD',
checked: true
}, {
name: '平均分数',
marker: function marker(x, y, r, ctx) {
ctx.lineWidth = 1;
ctx.strokeStyle = ctx.fillStyle;
ctx.moveTo(x - r - 3, y);
ctx.lineTo(x + r + 3, y);
ctx.stroke();
ctx.arc(x, y, r, 0, Math.PI * 2, false);
ctx.fill();
},
fill: '#FE75B0',
checked: true
}]
chart.legend({
custom: true,
items: legendItems
});
2.图表的绘制,图表的具体配置和前面基本一致。
chart.interval().position('name*score').color('#7B74FD').adjust(adjust);
chart.line().position('name*avgScore').color('#FE75B0').adjust(adjust);
注意点
1.图表的最外层容器，尽量不要使用scrollView,使用scrollView会造成图表的tooltip点击事件失效，可能是跟scrollView的滚动事件有冲突。
2.如果是legend无法点击，或者是点击区域有错位的现象，可能是图表渲染时机问题，可以尝试使用aif来控制图表在数据设置完成完成之后再渲染。
最后附上我简单写的demo地址。 github