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

来源：互联网发布：唐青枫官方捏脸数据编辑：程序博客网时间：2024/05/16 06:00

使用说明

安装 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 byxiabingwu on2016/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(){
        returnMath.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)

1 0