提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

微信小程序精品组件：chartjs：饼图，折线图，bar，point-styles

组件微信程序 精品 point 折线图 bar styles
2023-09-27 14:29:06 时间
使用说明
  • 安装 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
     }
}


项目地址及下载：

本帖隐藏的内容

https://github.com/xiabingwu/chartjs-wechat-mini-app
  chartjs-wechat-mini-app-master.zip (295.64 KB, 下载次数: 10)

相关文章