{"id":23447247,"url":"https://github.com/chmini-app/chcharts-wechat","last_synced_at":"2025-04-13T16:12:22.266Z","repository":{"id":57297980,"uuid":"146416318","full_name":"chmini-app/CHCharts-wechat","owner":"chmini-app","description":"📈A charts component for WeChat mini-app development(一款用于微信小程序开发中的图表组件，使用者可以快速添加并集成到微信小程序开发中).","archived":false,"fork":false,"pushed_at":"2019-11-18T10:32:11.000Z","size":2097,"stargazers_count":75,"open_issues_count":0,"forks_count":21,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-13T16:12:16.930Z","etag":null,"topics":["charts","frontend","html5","js","miniapp","wechat-app","wechat-framework","wechat-mini-program"],"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/chmini-app.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":"2018-08-28T08:29:11.000Z","updated_at":"2024-05-24T02:15:10.000Z","dependencies_parsed_at":"2022-09-26T16:31:15.187Z","dependency_job_id":null,"html_url":"https://github.com/chmini-app/CHCharts-wechat","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chmini-app%2FCHCharts-wechat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chmini-app%2FCHCharts-wechat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chmini-app%2FCHCharts-wechat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chmini-app%2FCHCharts-wechat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chmini-app","download_url":"https://codeload.github.com/chmini-app/CHCharts-wechat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741195,"owners_count":21154255,"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":["charts","frontend","html5","js","miniapp","wechat-app","wechat-framework","wechat-mini-program"],"created_at":"2024-12-23T21:16:56.232Z","updated_at":"2025-04-13T16:12:22.243Z","avatar_url":"https://github.com/chmini-app.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 在微信小程序中使用 CHCharts\n\n[![](https://img.shields.io/badge/license-MIT-red.svg)](https://github.com/chmini-app/CHCharts-wechat/blob/master/LICENSE) [![](https://img.shields.io/badge/npm-v2.0.2-519dd9.svg)](https://www.npmjs.com/package/miniprogram-chcharts)\n\n本项目是基于微信小程序开发的图表插件，以及使用的示例。\n\n开发者可以通过微信组件化方式配置 CHCharts，快速开发图表，满足各种可视化需求。\n\n# Demo 展示\n\n![](/others/demo.gif)\n\n# 使用 CHCharts\n\n首先，下载本项目。\n\n其中，`ch-canvas` 是我们提供的组件，其他文件是如何使用该组件的示例。\n\n## 引入组件\n\n微信小程序的项目创建可以参见[微信公众平台官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html)。\n\n在创建项目之后，拷贝 `ch-canvas` 目录到新建的项目下，然后做相应的调整。\n\n具体可以参考 `pages/rose` 目录下的几个文件的写法。下面，我们具体地说明。\n\n## 创建图表\n\n首先，在 `pages/rose` 目录下新建以下几个文件：`rose.js`、 `rose.json`、 `rose.wxml`、 `rose.wxss`。并且在 `app.json`\n\n`pages` 中增加 `'pages/rose/rose'`。\n\n`rose.json` 配置如下：\n\n```json\n{\n  \"usingComponents\": {\n    \"ch-canvas\": \"../../ch-canvas/ch-canvas\"\n  }\n}\n```\n\n然后，`pages/rose/rose.wxml` 中使用 `\u003cch-canvas\u003e` 组件。\n\n如 `rose.wxml` 中：\n\n```xml\n\u003cview class='container'\u003e\n  \u003cch-canvas canvasId='rose' id='rose'\u003e\u003c/ch-canvas\u003e\n\u003c/view\u003e\n```\n\n最后，在 `rose.js` 中配置相关参数、数据就可以在页面中显示出图表了。\n\n`rose.js` 配置如下：\n\n```js\nvar data = [\n  { name: '甜甜圈', value: 50, color: '#80e0ed' },\n  { name: '冰淇淋', value: 40, color: '#9197ed' },\n  { name: '棒棒糖', value: 30, color: '#eddf5c' },\n  { name: '奶茶', value: 60, color: '#e4ff99' },\n  { name: '抹茶蛋糕', value: 50, color: '#baffad' },\n  { name: '蛋挞', value: 20, color: '#afee9d' }\n]\n\nPage({\n  onLoad: function(options) {\n    var options = {\n      data: data,\n      legend: '{c}',\n      chartRatio: 0.95,\n      style: 'rose',\n      showLegend: true,\n      showLabel: true,\n      animation: true\n    }\n    this.roseComp = this.selectComponent('#rose')\n    this.roseComp.setOptions(options)\n    this.roseComp.initChart(320, 213)\n  }\n})\n```\n\n## 最近更新(v2.0.2)\n\n1. 坐标轴新增 xWordsCnt 和 xRows 参数，开发者可以通过它们调节坐标轴文字显示范围 \b。\n2. 修复已知 bug。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchmini-app%2Fchcharts-wechat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchmini-app%2Fchcharts-wechat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchmini-app%2Fchcharts-wechat/lists"}