wx-chart

跨平台微信小程序图形库

Usage no npm install needed!

<script type="module">
  import wxChart from 'https://cdn.skypack.dev/wx-chart';
</script>

README

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

实际效果以及Demo

PC场景下

all

微信场景下

快速使用

安装

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