https://github.com/xch89820/wx-chart
适用于微信小程序，普通站点的跨平台图形库。WeiXin APP chart
https://github.com/xch89820/wx-chart
canvas chart react weixin whatsapp wx wx-chart wxcharts
Last synced: 3 months ago
JSON representation
适用于微信小程序，普通站点的跨平台图形库。WeiXin APP chart
- Host: GitHub
- URL: https://github.com/xch89820/wx-chart
- Owner: xch89820
- License: mit
- Created: 2017-01-10T17:11:53.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-25T16:19:49.000Z (over 7 years ago)
- Last Synced: 2025-06-26T03:07:10.106Z (3 months ago)
- Topics: canvas, chart, react, weixin, whatsapp, wx, wx-chart, wxcharts
- Language: JavaScript
- Homepage:
- Size: 743 KB
- Stars: 57
- Watchers: 5
- Forks: 11
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# wx-chart [![NPM version][npm-version-image]][npm-url] [![MIT License][license-image]][license-url] [![NPM downloads][npm-downloads-image]][npm-url]
wx-chart是一个跨平台的图形库，可在普通站点，React环境以及微信小程序中部署
新版1.0 beta已经发布，全新更新的底层实现，兼容1.1.0-1.9.90及以上所有版本微信小程序SDK，并大幅优化了性能。
### 特点
* 跨平台：可以使用在AMD,CMD,微信小程序,React等环境中使用
* 封装性：基于自有开发的Canvas兼容层，支持W3C的Canvas标准。
* 自动化：图形绘画参数简单，颜色填充和布局分发可以自动化
* 扩展性：组件化设计，支持图形扩展（接口待开放）
当前持续更新中，有任何问题欢迎在 [Issues](https://github.com/xch89820/wx-chart/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`
### 声明节点
```html
```
### 引用库 & 使用
```js
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
```
```
而后将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](https://segmentfault.com/a/1190000011469347)
## 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插件](https://github.com/xch89820/wx-chart-react) 独立工程，解除主工程的依赖
增加栈式线形图
修复若干BUG
## License
wx-chart 遵循 [MIT license](http://opensource.org/licenses/MIT)
[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat
[license-url]: http://opensource.org/licenses/MIT
[npm-url]: https://www.npmjs.com/package/wx-chart
[npm-version-image]: http://img.shields.io/npm/v/wx-chart.svg?style=flat
[npm-downloads-image]: http://img.shields.io/npm/dm/wx-chart.svg?style=flat