⼩程序实战篇：基于wxcharts.js绘制移动报表
####前⾔
⼩程序图表插件（wx-charts）是基于canvas绘制，体积⼩巧，⽀持图表类型饼图、线图、柱状图 、区域图等图表图形绘制，⽬前wx-charts是⼩程序图表插件中⽐较强⼤好使的⼀个。
canvas动画
如上图所⽰，我们基于wxcharts.js 来实现订单统计报表。
####导⼊wxcharts.js
将wxcharts.js 存放在utils⽬录
####column.wxml
<view class="container">
<!--标题-->
<view class="title">
{{chartTitle}}
</view>
<!--绘制canvas-->
<canvas canvas-id="columnCanvas" class="canvas" bindtouchstart="touchHandler"></canvas> </view>
####coumn.js
>引⼊wxcharts.js
var wxCharts = require('../../../utils/wxcharts.js');
>初始化数据
var app = getApp();
var columnChart = null;
var chartData = {
main: {
title: '订单统计',
data: [23, 28, 35, 54, 95],
categories: ['2013', '2014', '2015', '2016', '2017']
}
};
>加载报表数据
Page({
data: {
chartTitle: '总订单',
isMainChartDisplay: true
},
onReady: function (e) {
var windowWidth = 320;
try {
var res = wx.getSystemInfoSync();
windowWidth = res.windowWidth;
} catch (e) {
<('getSystemInfoSync failed!');        }
columnChart = new wxCharts({
canvasId: 'columnCanvas',
type: 'column',
animation: true,
categories: chartData.main.categories,            series: [{
name: '订单量',
color:'#188df0',
data: chartData.main.data,
format: function (val, name) {
Fixed(2) + '万';
}
}],
yAxis: {
format: function (val) {
return val + '万';
},
min: 0
},
xAxis: {
disableGrid: false,
type: 'calibration'
},
extra: {
column: {
width: 15,
},
legendTextColor: '#000000'
},
width: windowWidth,
height: 200,
});
}
});
直接copy以上代码就可以查看效果哦~~~
####wx-charts更多特性
>⽀持报表类型
1. 饼图 pie
2. 圆环图 ring
3. 线图 line
4. 柱状图 column
5. 区域图 area
6. 雷达图 radar
>参数说明
opts                        Object
opts.canvasId                String required                    ⼩程序canvas-id
opts.width                  Number required                canvas宽度，单位为px
opts.height                  Number required                canvas⾼度，单位为px
opts.title                  Object          (only for ring chart)
opts.title.name              String          标题内容
opts.title.fontSize          Number            标题字体⼤⼩（可选，单位为px）
lor            String          标题颜⾊（可选）
opts.subtitle                Object        (only for ring chart)
opts.subtitle.name          String          副标题内容
opts.subtitle.fontSize      Number          副标题字体⼤⼩（可选，单位为px）lor          String          副标题颜⾊（可选）
opts.animation              Boolean default true        是否动画展⽰
opts.legend                  Boolen default true      是否显⽰图表下⽅各类别的标识pe                    String required 图表类型，可选值为pie, line, column, area……opts.categories              Array required      (饼图、圆环图不需要) 数据类别分类opts.dataLabel              Boolean default true    是否在图表中显⽰数据内容值opts.dataPointShape          Boolean default true  是否在图表中显⽰数据点图形标识opts.xAxis                  Object      X轴配置
opts.xAxis.disableGrid      Boolean default false      不绘制X轴⽹格
opts.yAxis                  Object    Y轴配置
opts.yAxis.format            Function          ⾃定义Y轴⽂案显⽰
opts.yAxis.min              Number        Y轴起始值
opts.yAxis.max              Number          Y轴终⽌值
opts.yAxis.title            String      Y轴title
opts.yAxis.disabled          Boolean default false        不绘制Y轴
opts.series                  Array required        数据列表
>结构定义
dataItem                      Object
dataItem.data                Array required (饼图、圆环图为Number) 数据lor                String 例如#7cb5ec 不传⼊则使⽤系统默认配⾊⽅案dataItem.name                String 数据名称
dateItem.format              Function ⾃定义显⽰数据内容

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。

Android使用surfaceView原生绘制
« 上一篇
画布、信号和槽
下一篇 »

发表评论

Copyright © 2024 baidu.com
Powered By 688IT编程网 豫ICP备2022007602号 豫公网安备41160202000602