wx-chart

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
• [x] 支持1.9.90微信版本
• [x] 中间层优化性能
• [x] 增加动画效果
• [x] Canvas中间层优化
• [x] 增加bar，line点展示
• [x] 增加Tooltip
• [ ] 雷达图
• [x] 泡状图
• [ ] 支持Vue
• [ ] 支持React Native

实际效果以及Demo

PC场景下

微信场景下

快速使用

安装

使用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

React环境

请参见wx-chart react插件： https://github.com/xch89820/wx-chart-react

文档

https://www.kancloud.cn/xchhhh/wx-chart

实现原理（持续更新中...）

微信小程序开发跨平台图表库：part1

ChangeLog

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

License

wx-chart 遵循 MIT license