{"id":29368337,"url":"https://github.com/xch89820/wx-chart","last_synced_at":"2025-07-09T12:12:47.131Z","repository":{"id":57400362,"uuid":"78555574","full_name":"xch89820/wx-chart","owner":"xch89820","description":"适用于微信小程序，普通站点的跨平台图形库。WeiXin APP chart","archived":false,"fork":false,"pushed_at":"2018-03-25T16:19:49.000Z","size":761,"stargazers_count":57,"open_issues_count":7,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-06-26T03:07:10.106Z","etag":null,"topics":["canvas","chart","react","weixin","whatsapp","wx","wx-chart","wxcharts"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xch89820.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-10T17:11:53.000Z","updated_at":"2025-03-19T09:08:05.000Z","dependencies_parsed_at":"2022-08-30T20:01:14.919Z","dependency_job_id":null,"html_url":"https://github.com/xch89820/wx-chart","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/xch89820/wx-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xch89820%2Fwx-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xch89820%2Fwx-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xch89820%2Fwx-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xch89820%2Fwx-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xch89820","download_url":"https://codeload.github.com/xch89820/wx-chart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xch89820%2Fwx-chart/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264016981,"owners_count":23544643,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","chart","react","weixin","whatsapp","wx","wx-chart","wxcharts"],"created_at":"2025-07-09T12:12:45.600Z","updated_at":"2025-07-09T12:12:47.123Z","avatar_url":"https://github.com/xch89820.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wx-chart  [![NPM version][npm-version-image]][npm-url]   [![MIT License][license-image]][license-url]    [![NPM downloads][npm-downloads-image]][npm-url]\n\nwx-chart是一个跨平台的图形库，可在普通站点，React环境以及微信小程序中部署\n\n新版1.0 beta已经发布，全新更新的底层实现，兼容1.1.0-1.9.90及以上所有版本微信小程序SDK，并大幅优化了性能。\n\n### 特点\n* 跨平台：可以使用在AMD,CMD,微信小程序,React等环境中使用\n* 封装性：基于自有开发的Canvas兼容层，支持W3C的Canvas标准。\n* 自动化：图形绘画参数简单，颜色填充和布局分发可以自动化\n* 扩展性：组件化设计，支持图形扩展（接口待开放）\n\n当前持续更新中，有任何问题欢迎在 [Issues](https://github.com/xch89820/wx-chart/issues) 中讨论。\n\n### 支持图表\n* 线状图\n  单维度/多维度曲线图(Line)，单维度/多维度区域曲线图(Area Line)，栈式线形图(Stacked Line)\n* 饼状图\n  单维度饼状图(Pie)，单维度多纳圈图(Doughnut)\n* 柱状图\n  单维度/多维度柱状图(Bar)，多维度堆叠柱状图(Stacked Bar)\n* 气泡图\n  单维度/多维度气泡图(Bar)\n\n##### 近期计划支持图表\n- [ ] 独立微信兼容层wxCanvas\n- [x] 支持1.9.90微信版本\n- [x] 中间层优化性能\n- [x] 增加动画效果\n- [x] Canvas中间层优化\n- [x] 增加bar，line点展示\n- [x] 增加Tooltip\n- [ ] 雷达图\n- [x] 泡状图\n- [ ] 支持Vue\n- [ ] 支持React Native\n\n## 实际效果以及Demo\n#### PC场景下\n![all](https://user-images.githubusercontent.com/4920540/31314620-66222d5a-ac37-11e7-836f-82b346bae3c2.gif)\n\n#### 微信场景下\n\n\u003cimg src=\"https://user-images.githubusercontent.com/4920540/37877101-9716dc28-3088-11e8-8498-2ea1e8abea3a.gif\" width=\"400\"\u003e\n\n\n## 快速使用\n\n### 安装\n使用npm下载： `npm install wx-chart --save`\n\n使用bower下载：`bower install wx-chart`\n\n### 声明节点\n\n```html\n\u003ccanvas id=\"myCanvas\" style=\"width:600px; height:400px; border: 1px solid #ffffff;\"\u003e\u003c/canvas\u003e\n```\n\n### 引用库 \u0026 使用\n\n```js\nimport { WxLiner } from 'wx-chart';\n\n// 实例化一个线状图\nvar wxLiner = new .WxLiner('myCanvas', { //myCanvas 为节点的ID值\n  width: 600,\n  height: 400,\n  title: '销售量',\n  legends: [{\n\ttext: '巧克力'\n  }]\n});\n\n// 更新数据\nwxLiner.update([{\n  value: 10,\n  label: '一月'\n}, {\n  value: 40,\n  label: '二月'\n}, {\n  value: 35,\n  label: '三月'\n}, {\n  value: 56,\n  label: '四月'\n}, {\n  value: 71,\n  label: '五月'\n}]);\n\n// 增加Tooltip\nwxLiner.once('draw',(views) =\u003e {\n   let handler = wxLiner.mouseoverTooltip(views);\n   canvas.addEventListener('mousemove', handler);\n});\n```\n\n搞定，一个简单的线图诞生了。可以看到在我们引用wx-chart后，全局变量 `WxChart` 中就包含的我们所需的图形库类。在进行初始化后，使用 `update` 方法便可以更新我们的数据部分，从而触发图形渲染。\n\n如果你想查看更详细的使用，请参见文档链接\n\n### 微信小程序\n\n当前微信小程序不支持从npm等包管理器下载js库，因此你需要手动拷贝 `dist/wx-chart.min.js` 到你的程序工程中，而后手动引用。\n\n微信小程序中，首先在 view 声明一个Canvas节点,请注意需要声明 canvas-id\n```\n\u003cview class=\"container\"\u003e\n   \u003ccanvas canvas-id=\"myCanvas\" style=\"width:600px; height:400px; border: 1px solid #ffffff;\" bindtouchend=\"lineTouched\"\u003e\u003c/canvas\u003e\n\u003c/view\u003e\n```\n\n而后将wx-chart的工程文件加入小程序工程，并引用\n```\nlet WxChart = require(\"you/path/wx-chart.min.js\");\n\n// 初始化\n// 设置项与上一例子相同\nPage({\n   ...,\n   onReady: function() {\n       // 建议在onReady中声明\n       let me = this;\n       let options = {...};\n       let myChart = new WxChart.WxLiner('myCanvas', options);\n\n       myChart.once('draw', function (views) {\n           // 动态生成touch事件的绑定函数\n           me.lineTouched = myChart.mouseoverTooltip(views);\n       });\n   },\n   ...\n```\n\n完整的例子请见：\nhttps://github.com/xch89820/wx-chart-demo\n\n### React环境\n\n请参见wx-chart react插件：\nhttps://github.com/xch89820/wx-chart-react\n\n## 文档\nhttps://www.kancloud.cn/xchhhh/wx-chart\n\n## 实现原理（持续更新中...）\n[微信小程序开发跨平台图表库：part1](https://segmentfault.com/a/1190000011469347)\n\n## ChangeLog\nv1.0.0\n整体升级兼容层，支持1.1.0-1.9.90及以上所有版本微信小程序SDK\n增减tooltip支持\n加入气泡图\n完善单元测试，重写底层模拟各个版本微信小程序SDK\n\nv0.3.4\n对微信新接口兼容\n增加坐标轴转换类\n\nv0.3.3\n增加bar，line点展示\n\nv0.3.2\n增加动画效果\n\nv0.3.1\n更新ReadME\n\nv0.3\n更新文档到看云：https://www.kancloud.cn/xchhhh/wx-chart\n\nv0.2.2\n[react插件](https://github.com/xch89820/wx-chart-react) 独立工程，解除主工程的依赖\n增加栈式线形图\n修复若干BUG\n\n## License\n\nwx-chart 遵循 [MIT license](http://opensource.org/licenses/MIT)\n\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat\n[license-url]: http://opensource.org/licenses/MIT\n\n[npm-url]: https://www.npmjs.com/package/wx-chart\n[npm-version-image]: http://img.shields.io/npm/v/wx-chart.svg?style=flat\n[npm-downloads-image]: http://img.shields.io/npm/dm/wx-chart.svg?style=flat\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxch89820%2Fwx-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxch89820%2Fwx-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxch89820%2Fwx-chart/lists"}