wx-chart是一个跨平台的图形库，可在普通站点，React环境以及微信小程序中部署
新版1.0 beta已经发布，全新更新的底层实现，兼容1.1.0-1.9.90及以上所有版本微信小程序SDK，并大幅优化了性能。
- 跨平台：可以使用在AMD,CMD,微信小程序,React等环境中使用
- 封装性：基于自有开发的Canvas兼容层，支持W3C的Canvas标准。
- 自动化：图形绘画参数简单，颜色填充和布局分发可以自动化
- 扩展性：组件化设计，支持图形扩展（接口待开放）
当前持续更新中，有任何问题欢迎在 Issues 中讨论。
- 线状图 单维度/多维度曲线图(Line)，单维度/多维度区域曲线图(Area Line)，栈式线形图(Stacked Line)
- 饼状图 单维度饼状图(Pie)，单维度多纳圈图(Doughnut)
- 柱状图 单维度/多维度柱状图(Bar)，多维度堆叠柱状图(Stacked Bar)
- 气泡图 单维度/多维度气泡图(Bar)
- 独立微信兼容层wxCanvas
- 支持1.9.90微信版本
- 中间层优化性能
- 增加动画效果
- Canvas中间层优化
- 增加bar，line点展示
- 增加Tooltip
- 雷达图
- 泡状图
- 支持Vue
- 支持React Native
使用npm下载： npm install wx-chart --save
使用bower下载：bower install wx-chart
<canvas id="myCanvas" style="width:600px; height:400px; border: 1px solid #ffffff;"></canvas>import { WxLiner } from 'wx-chart';
// 实例化一个线状图
var wxLiner = new .WxLiner('myCanvas', { //myCanvas 为节点的ID值
width: 600,
height: 400,
title: '销售量',
legends: [{
text: '巧克力'
}]
});
// 更新数据
wxLiner.update([{
value: 10,
label: '一月'
}, {
value: 40,
label: '二月'
}, {
value: 35,
label: '三月'
}, {
value: 56,
label: '四月'
}, {
value: 71,
label: '五月'
}]);
// 增加Tooltip
wxLiner.once('draw',(views) => {
let handler = wxLiner.mouseoverTooltip(views);
canvas.addEventListener('mousemove', handler);
});搞定，一个简单的线图诞生了。可以看到在我们引用wx-chart后，全局变量 WxChart 中就包含的我们所需的图形库类。在进行初始化后，使用 update 方法便可以更新我们的数据部分，从而触发图形渲染。
如果你想查看更详细的使用，请参见文档链接
当前微信小程序不支持从npm等包管理器下载js库，因此你需要手动拷贝 dist/wx-chart.min.js 到你的程序工程中，而后手动引用。
微信小程序中，首先在 view 声明一个Canvas节点,请注意需要声明 canvas-id
<view class="container">
<canvas canvas-id="myCanvas" style="width:600px; height:400px; border: 1px solid #ffffff;" bindtouchend="lineTouched"></canvas>
</view>
而后将wx-chart的工程文件加入小程序工程，并引用
let WxChart = require("you/path/wx-chart.min.js");
// 初始化
// 设置项与上一例子相同
Page({
...,
onReady: function() {
// 建议在onReady中声明
let me = this;
let options = {...};
let myChart = new WxChart.WxLiner('myCanvas', options);
myChart.once('draw', function (views) {
// 动态生成touch事件的绑定函数
me.lineTouched = myChart.mouseoverTooltip(views);
});
},
...
完整的例子请见： https://github.com/xch89820/wx-chart-demo
请参见wx-chart react插件： https://github.com/xch89820/wx-chart-react
https://www.kancloud.cn/xchhhh/wx-chart
v1.0.0 整体升级兼容层，支持1.1.0-1.9.90及以上所有版本微信小程序SDK 增减tooltip支持 加入气泡图 完善单元测试，重写底层模拟各个版本微信小程序SDK
v0.3.4 对微信新接口兼容 增加坐标轴转换类
v0.3.3 增加bar，line点展示
v0.3.2 增加动画效果
v0.3.1 更新ReadME
v0.3 更新文档到看云：https://www.kancloud.cn/xchhhh/wx-chart
v0.2.2 react插件 独立工程，解除主工程的依赖 增加栈式线形图 修复若干BUG
wx-chart 遵循 MIT license