公告列表
公告列表
收藏
评论

微信小程序图表工具wx-charts


微信小程序图表工具，charts for WeChat small app，基于canvas绘制，体积小巧。

wx-charts

微信小程序图表工具，charts for WeChat small app

基于canvas绘制，体积小巧

持续优化更新中，请保持关注~ 有任何问题欢迎在Issues中讨论，提出issue前请先阅读此须知

支持图表类型

  • 饼图 pie
  • 圆环图 ring
  • 线图 line
  • 柱状图 column
  • 区域图 area
  • 雷达图 radar

代码分析 Here

更新记录

  • [ ] 动画性能优化
  • [x] 图表滚动的支持，感谢@jxintang
  • [x] 优化曲线绘制
  • [x] 新增雷达图 2017-03-17
  • [x] 新增tooltip 2017-03-07
  • [x] 新增曲线的绘制 2017-03-06
  • [x] 新增更新数据、终止进行中的动画方法，渲染完成事件回调 2017-02-17
  • [x] 新增圆环图title, subtitle 2017-01-10
  • [x] x轴文案碰撞避让 2016-12-30
  • [x] add pie chart dataLabel 2016-12-19
  • [x] add animation 2016-12-05
  • [x] build with rollup 2016-12-02
  • [x] add legend 2016-11-29

如何使用

1、直接引用编译好的文件 dist/wxcharts.js 或者 dist/wxcharts-min.js

2、自行编译

git clone https://github.com/xiaolin3303/wx-charts.git
npm install rollup -g
npm install
rollup -c 或者 rollup --config rollup.config.prod.js

实际项目中如何具体使用wx-charts 或者 访问wx-charts-demo查看在微信开发工具中直接运行的例子

参数说明

参数说明 - wxCharts使用文档

方法 & 事件

方法 & 事件 - wxCharts使用说明

Example

pieChart ringChart lineChart curveLineChart columnChart areaChart areaChart

pieChart ringChart lineChart columnChart areaChart tooltip scrollLineChart

更多内容请查看Example - wxCharts使用说明

测试

  1. iPhone 6s, IOS 9.3.5
  2. 小米4, ANDORID 6.0.1

兼容性问题请在Issue中提出

一些问题的说明汇总

https://github.com/xiaolin3303/wx-charts
最后一次编辑于  2017-12-13
收藏

23 个评论

  • lil
    lil
    2020-12-01

    您好，我在components中使用wxcharts的时候，发现在components里面canvas画不出来，是因为少创建画布对象的时候需要传入this，所以，建议在参数中多一个this，这样就支持在components中使用了。

    //wxcharts中创建画布代码
this.context = wx.createCanvasContext(opts.canvasId,opts.this);
//传入this参数
new wxCharts({
  canvasId: "wxChart",
  this:this,
  ...
})
    2020-12-01
    赞同 2
    回复 2
    • 不脱单不改网名不过节
      不脱单不改网名不过节
      2021-06-02
      我也遇到同样的问题   因为一个页面中 要展示9张统计图表 所以就用插件的方法引入  结果也是出不来图片
      2021-06-02
      赞
      回复
    • lil
      lil
      2021-07-13回复不脱单不改网名不过节
      小程序里的图表最好放分包，插件太大了，放主包稍微不注意就超了。用echat吧，那个虽然大但是好看，功能也全，这个插件开发者好几年没维护了。
      2021-07-13
      赞
      回复
  • 陈志国
    陈志国
    2019-08-15

    太丑了

    2019-08-15
    赞同 2
    回复 1
    • Code Weaver
      Code Weaver
      2019-08-15
      那自己做吧。。。
      2019-08-15
      赞 10
      回复
  • 清月
    清月
    2020-02-25

    您好！我想问下x轴没有文案参数嘛（也就是单位标识）？

    2020-02-25
    赞同 1
    回复
  • h
    h
    2019-02-09

    微信交流 zhaohe012

    2019-02-09
    赞同 1
    回复
  • 林常兴
    林常兴
    2018-04-12

    保持关注！

    2018-04-12
    赞同 1
    回复
  • 伊吹风子
    伊吹风子
    2023-03-10

    屏幕切换抖动该怎么整

    2023-03-10
    赞同
    回复
  • 楊禮
    楊禮
    2022-03-31

    网格线能设置虚线？ 坐标轴的分割段数可以设置？

    2022-03-31
    赞同
    回复
  • 楊禮
    楊禮
    2022-03-31

    网格线能设置虚线？ 坐标轴的分割段数可以设置？

    2022-03-31
    赞同
    回复
  • 🌲平凡德🔥
    🌲平凡德🔥
    2022-03-14

    能修改每个柱子的颜色吗？

    2022-03-14
    赞同
    回复
  • 终是庄公梦了蝶🐾
    终是庄公梦了蝶🐾
    2021-09-01

    你好，为什么enableScroll设为true，x轴方向可以随意拖拽但是y轴方向不可以

    2021-09-01
    赞同
    回复

正在加载...

请 登录 后发表内容