Skip to content

📈A charts component for WeChat mini-app development(一款用于微信小程序开发中的图表组件,使用者可以快速添加并集成到微信小程序开发中).

License

Notifications You must be signed in to change notification settings

chmini-app/CHCharts-wechat

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

在微信小程序中使用 CHCharts

本项目是基于微信小程序开发的图表插件,以及使用的示例。

开发者可以通过微信组件化方式配置 CHCharts,快速开发图表,满足各种可视化需求。

Demo 展示

使用 CHCharts

首先,下载本项目。

其中,ch-canvas 是我们提供的组件,其他文件是如何使用该组件的示例。

引入组件

微信小程序的项目创建可以参见微信公众平台官方文档

在创建项目之后,拷贝 ch-canvas 目录到新建的项目下,然后做相应的调整。

具体可以参考 pages/rose 目录下的几个文件的写法。下面,我们具体地说明。

创建图表

首先,在 pages/rose 目录下新建以下几个文件:rose.jsrose.jsonrose.wxmlrose.wxss。并且在 app.json

pages 中增加 'pages/rose/rose'

rose.json 配置如下:

{
  "usingComponents": {
    "ch-canvas": "../../ch-canvas/ch-canvas"
  }
}

然后,pages/rose/rose.wxml 中使用 <ch-canvas> 组件。

rose.wxml 中:

<view class='container'>
  <ch-canvas canvasId='rose' id='rose'></ch-canvas>
</view>

最后,在 rose.js 中配置相关参数、数据就可以在页面中显示出图表了。

rose.js 配置如下:

var data = [
  { name: '甜甜圈', value: 50, color: '#80e0ed' },
  { name: '冰淇淋', value: 40, color: '#9197ed' },
  { name: '棒棒糖', value: 30, color: '#eddf5c' },
  { name: '奶茶', value: 60, color: '#e4ff99' },
  { name: '抹茶蛋糕', value: 50, color: '#baffad' },
  { name: '蛋挞', value: 20, color: '#afee9d' }
]

Page({
  onLoad: function(options) {
    var options = {
      data: data,
      legend: '{c}',
      chartRatio: 0.95,
      style: 'rose',
      showLegend: true,
      showLabel: true,
      animation: true
    }
    this.roseComp = this.selectComponent('#rose')
    this.roseComp.setOptions(options)
    this.roseComp.initChart(320, 213)
  }
})

最近更新(v2.0.2)

  1. 坐标轴新增 xWordsCnt 和 xRows 参数,开发者可以通过它们调节坐标轴文字显示范围 �。
  2. 修复已知 bug。

About

📈A charts component for WeChat mini-app development(一款用于微信小程序开发中的图表组件,使用者可以快速添加并集成到微信小程序开发中).

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published