微信小程序精品组件：chartjs：饼图，折线图，bar，point-styles
使用说明
安装 npm install
gulp build 生成/Chart.js-master/dist/Chart.min.js文件
使用压缩合并版本
打开 dev/page/canvas/chart.js
注释 import Chart from ‘../../Chart.js-master/src/chart’
开启 import Chart from ‘../../Chart.js-master/dist/Chart.min’
IDE效果
适配案例
bar
doughnut.png
line
line-multi-axis
pie
point-styles
项目结构：
/**
*
Created by
xiabingwu on
2016/11/21.
*/
import Chart from
'../canvas/chart'
export default function(canvasConfig){
var chartColors =
{
red:
'rgb(255,
99,
132)',
orange:
'rgb(255,
159,
64)',
yellow:
'rgb(255,
205,
86)',
green:
'rgb(75,
192,
192)',
blue:
'rgb(54,
162,
235)',
purple:
'rgb(153,
102,
255)',
grey:
'rgb(231,233,237)'
};
var randomScalingFactor =
function ()
{
return
(Math.random()
> 0.5 ? 1.0
: -1.0)
* Math.round(Math.random()
* 100);
}
var randomScalingFactor =
function()
{
return
Math.round(Math.random()
* 100);
};
var chartConfig =
{
type:
'doughnut',
data:
{
datasets:
[{
data:
[
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor:
[
chartColors.red,
chartColors.orange,
chartColors.yellow,
chartColors.green,
chartColors.blue,
],
label:
'Dataset 1'
}],
labels:
[
"Red",
"Orange",
"Yellow",
"Green",
"Blue"
]
},
options:
{
responsive:
false,
legend:
{
position:
'top',
},
title:
{
display:
true,
text:
'Chart.js Doughnut Chart'
},
animation:
{
animateScale:
true,
animateRotate:
true
}
}
};
return
{
chartConfig:chartConfig,
canvasConfig:canvasConfig
}
}项目地址及下载：
本帖隐藏的内容
https://github.com/xiabingwu/chartjs-wechat-mini-app
chartjs-wechat-mini-app-master.zip (295.64 KB, 下载次数: 10)
想要获取跟多微信小程序开发源码和组件和视频
拿出手机扫一扫就可以啦，
