这篇主要介绍一下小程序图表组件
chart.js的使用，项目中用到大神在github上分享的开源项目，这里给大家推荐和简单介绍下。具体的下载链接在下面：
导入
微信小程序有很简单的第三方导入机制，一般第三方函数都是写好后放在.js文件中的，小程序在具体的使用时将其.js文件导入就可以了。
下载完上述链接的.js文件后将其放在小程序工程中，这里为了便于管理我放在了使用图表功能的页面的文件夹下：
之后在要使用到charts功能的.js文件中引用此第三方库：
var wxCharts = require('charts.js');
var voltageChart = new Array();
var currentChart = new Array();
voltageChart;currentChart;是将要用到的函数图片的句柄，在这里一起初始化了。如果将模块放在其他目录下要注意路径问题，推荐全部使用绝对路径，不过这样有改动时比较麻烦。这里我起的名字wxCharts即是第三方函数库的句柄，之后便可以引用其中的函数和数据等。
折线图
因为我的小程序只用到了折线图，所以这里只介绍一下折线图的用法，别的类型的图如柱状图等原理是一样的。
.wxml和.wxss
所有的第三方库实质上是二次开发，.charts.js也是一样。他的显示依赖于微信小程序的canvas组件，对组件有疑问的可以移步微信官方api：
https://developers.weixin.qq.com/miniprogram/dev/api/
首先在.wxml文件中放置canvas组件：
// device.wxml
<block wx:for="{{batteryList}}">
<view class='batteryicon' bindtap='clickLine' data-id="{{index}}">
<canvas canvas-id="batteryCanvas{{index}}" disable-scroll="true" class="batterycanvas"></canvas>
</view>
</block>
因为我用到了多个图表，所以这里用到了一个block模块。注意canvas模块中的属性canvas-id，对于画多个图表来说，这个属性是canvas组件和图表实例链接唯一的区分标识。
当然为了图表的美观，我们也可以对canvas模块加一些属性描述：
// device.wxss
.batterycanvas {
width: 50%;
height: 150rpx;
}
.batteryicon {
display: flex;
justify-content: center;
}
这里写的比较简单，具体的描述大家可以自己更改。
图表初始化
图表初始化这一步我放在页面onLoad函数中进行实现，也就是默认在加载页面时加载图表。在只有一张图表插件时响应比较快，但是我的工程中一次性放了八张图表，所以图表的更新（页面的加载完全）比较慢，甚至远远超过8*一张图表的更新速度。这个问题究竟是因为我放的图表过多，还是.js文件中的其他组件占用的资源过多引起的，我到现在也没有搞明白。如果有大神了解这方面问题，还请不吝赐教。
言归正传，图表初始化直接调用charts.js文件的句柄既可以，也就是：
// device.js
for (var i = 0; i < 4; i++) {
currentChart[i] = new wxCharts({
canvasId: 'currentCanvas' + i,
type: 'line',
categories: that.data.categories,
animation: true,
// background: '#f5f5f5',
series: [{
data: that.data.current[i],
format: function (val, name) {
return val.toFixed(2) + 'A';
}
}],
xAxis: {
disableGrid: true
},
yAxis: {
title: '历史电流（mA）',
format: function (val) {
return val.toFixed(2);
},
min: 0
},
width: windowWidth,
height: 200,
dataLabel: false,
dataPointShape: true,
extra: {
lineStyle: 'curve'
}
});
}
初始化的许多参数含义其实还是很直白的：
| 属性名 | 含义和注意点 |
|---|---|
| canvasId | 图表实例链接的canvas组件 |
| type | 图表形式，折线图、饼状图等 |
| categories | 图表的横轴含义 |
| animation | 有无初始化动画 |
| series | 图表数据，data描绘具体数据，format描绘格式：整形等 |
| xAxis/yAxis | 图表网格是默认开启的，通过disableGrid属性关闭 ；title设置标题；min设置可以显示的最小值 |
| width | 图表宽度 |
| height | 图表高度 |
| dataLabel | 数据标签 |
| dataPointShape | 数据点显示与否 |
| extra | 其他一些设置，线型，线宽等等 |
new wxCharts()函数的返回值是创建的图表实例的唯一标识，以后在使用更新函数等方法时需要指定。前面也提到过我的小程序需要用到八个图表实例，这里先初始化四个。以上一些变量的初始化均略去，如果有想复现此demo的，可以跳到开头去我的github上下载。相关的wxml文件配置如下所示：
<view class='btnSet' >
<button class='btn' bindtap='open' data-id="{{index}}">充电</button>
<button class='btn' bindtap='stop' data-id="{{index}}" >暂停</button>
<button class='btn' bindtap='close' data-id="{{index}}">放电</button>
</view>
<!-- <button bindtap='updateData'>更新</button> -->
<block wx:for="{{batteryList}}">
<view class="item">
<view class='batteryicon' bindtap='clickLine' data-id="{{index}}">
<canvas canvas-id="batteryCanvas{{index}}" disable-scroll="true" class="batterycanvas"></canvas>
</view>
<view style='display:flex;justify-content: center;flex-direction: column;'>
<view style='display:flex;justify-content: center;flex-direction: row;'>
<view>电压：{{item[0]}}mV</view>
<view style='padding-left:20rpx'>电流：{{item[1]}}mA</view>
</view>
<view style='display:flex;justify-content: center;flex-direction: row;'>
<view>温度：{{item[2]}}℃</view>
<view style='padding-left:20rpx'>剩余电量：{{item[3]}}mAh</view>
</view>
</view>
<view class='contain' hidden='{{drawHidden[index]==1}}'>
<text class='title'>电池{{index}}</text>
<canvas canvas-id="voltageCanvas{{index}}" disable-scroll="true" class="canvas"></canvas>
<canvas canvas-id="currentCanvas{{index}}" disable-scroll="true" class="canvas"></canvas>
</view>
</view>
</block>
最后得到的结果如下面所示：
数据更新
chart.js还提供了数据更新的方法，调用方法也简单：
updateData: function () {
var that = this
that.getTime()
for(var i=0;i<4;i++){
var series = [{
name: '电压' + i,
data: that.data.voltage[i],
//data: [1, 1, 1, 1, 1, 1.5, 1.5, 1.5, 1.5, 1.5],
format: function (val, name) {
return val.toFixed(2) + 'mV';
}
}];
voltageChart[i].updateData({
categories: that.data.categories,
series: series,
//canvasId: 'voltageCanvas'+i,
});
}
for (var i = 0; i < 4; i++) {
var series = [{
name: '电流' + i,
data: that.data.current[i],
// data: [1, 1, 1, 1, 1, 1.5, 1.5, 1.5, 1.5, 1.5],
format: function (val, name) {
return val.toFixed(2) + 'mA';
}
}];
currentChart[i].updateData({
categories: that.data.categories,
series: series,
//canvasId: 'currentCanvas' + i,
});
}
},
主要用到的是updateData函数，可以设置的参数有如下几个：
| 属性名 | 含义 |
|---|---|
| series | 数据串 |
| categories | 横轴内容 |
| title | 标题 |
| subtitle | 副标题 |
更新数据时的动画和初始化设置时是一样的。
数据显示
charts.js也可以悬浮显示具体的数据点内容，即使下面的效果：
首先我们需要给canvas组件绑定bindtouchstart属性：
<canvas bindtouchstart="voltageTouch{{index}}" canvas-id="voltageCanvas{{index}}" disable-scroll="true" class="canvas"></canvas>
<canvas bindtouchstart="currentTouch{{index}}" canvas-id="currentCanvas{{index}}" disable-scroll="true" class="canvas"></canvas>
之后在.js文件里调用绑定好的回调函数：
voltageTouch0: function (e) {
voltageChart[0].showToolTip(e, {
// background: '#7cb5ec',
format: function (item, category) {
return category + ' ' + item.name + ':' + item.data
}
});
},
voltageTouch1: function (e) {
voltageChart[1].showToolTip(e, {
// background: '#7cb5ec',
format: function (item, category) {
return category + ' ' + item.name + ':' + item.data
}
});
},
voltageTouch2: function (e) {
voltageChart[2].showToolTip(e, {
// background: '#7cb5ec',
format: function (item, category) {
return category + ' ' + item.name + ':' + item.data
}
});
},
voltageTouch3: function (e) {
voltageChart[3].showToolTip(e, {
// background: '#7cb5ec',
format: function (item, category) {
return category + ' ' + item.name + ':' + item.data
}
});
},
currentTouch0: function (e) {
currentChart[0].showToolTip(e, {
// background: '#7cb5ec',
format: function (item, category) {
return category + ' ' + item.name + ':' + item.data
}
});
},
currentTouch1: function (e) {
currentChart[1].showToolTip(e, {
// background: '#7cb5ec',
format: function (item, category) {
return category + ' ' + item.name + ':' + item.data
}
});
},
currentTouch2: function (e) {
currentChart[2].showToolTip(e, {
// background: '#7cb5ec',
format: function (item, category) {
return category + ' ' + item.name + ':' + item.data
}
});
},
currentTouch3: function (e) {
currentChart[3].showToolTip(e, {
// background: '#7cb5ec',
format: function (item, category) {
return category + ' ' + item.name + ':' + item.data
}
});
},
在format中可以设置显示的详细内容。