微信小程序精品组件：chartjs：饼图，折线图，bar，point-styles
本文共 1945 字，大约阅读时间需要 6 分钟。
使用说明- 安装 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
代码示例：
[AppleScript] 纯文本查看 复制代码
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | / * * * 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 } } |
项目地址及下载：
转载地址：http://xshni.baihongyu.com/
你可能感兴趣的文章
React+Redux系列教程
查看>>
react-native 自定义倒计时按钮
查看>>
19 个 JavaScript 常用的简写技术
查看>>
ES6这些就够了
查看>>
微信小程序：支付系列专辑（开发指南+精品Demo）
查看>>
iOS应用间相互跳转
查看>>
iOS开发之支付宝集成
查看>>
iOS开发 支付之银联支付集成
查看>>
iOS开发支付集成之微信支付
查看>>
浅谈JavaScript--声明提升
查看>>
React Native 图片组件的一些常见问题汇总
查看>>
webpack4.0各个击破（5）—— Module篇
查看>>
webpack4.0各个击破（6）—— Loader篇
查看>>
React性能优化
查看>>
vue.js将px转化为rem
查看>>
vue如何在手机中通过本机IP地址访问webApp
查看>>
React非嵌套组件通信
查看>>
Websocket 使用指南
查看>>
前端常用插件、工具类库汇总，不要重复造轮子啦！！！
查看>>
基于Vue全家桶制作的的高仿美团APP
查看>>