Chart.js-饼状图分析（参数分析+例图）_js饼状图

饼状图样式总览

基本写法

首先在< script >标签里面引入chart.js：

<script src="chart.js/Chart.js"></script>
1

然后创建一个画布：

<canvas id="myChart" width="400" height="400"></canvas>
1

最后写js代码：

var ctx = $('#myChart1');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],
        datasets: [{
            label: '# of 战力',
            data: [100, 110, 120, 70, 140, 10],
            backgroundColor: [
                'rgba(255, 99, 132,1)',
                'rgba(54, 162, 235,1)',
                'rgba(255, 206, 86,1)',
                'rgba(75, 192, 192,1)',
                'rgba(153, 102, 255,1)',
                'rgba(255, 159, 64,1)'
            ],
            borderColor:'white',
            borderWidth: 2,
            fill:false
        }]
    },
    options: {
        title: {
                display: true,
                text: '饼状图1 - 普通饼状图'
            }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

参数解析

【注意】以下都是写入在datasets中的参数：

# 饼状图1 - 普通饼状图

var ctx = $('#myChart1');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],
        datasets: [{
            label: '# of 战力',
            data: [100, 110, 120, 70, 140, 10],
            backgroundColor: [
                'rgba(255, 99, 132,1)',
                'rgba(54, 162, 235,1)',
                'rgba(255, 206, 86,1)',
                'rgba(75, 192, 192,1)',
                'rgba(153, 102, 255,1)',
                'rgba(255, 159, 64,1)'
            ],
            borderColor:'white',
            borderWidth: 2
        }]
    },
    options: {
        title: {
                display: true,
                text: '饼状图1 - 普通饼状图'
            }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

饼状图2 - 中空同心圆

var ctx2 = $('#myChart2');
var myChart = new Chart(ctx2, {
    type: 'doughnut',
    data: {
        labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],
        datasets: [{
            label: '# of 战力',
            data: [100, 110, 120, 70, 140, 10],
            backgroundColor: [
                'rgba(255, 99, 132,1)',
                'rgba(54, 162, 235,1)',
                'rgba(255, 206, 86,1)',
                'rgba(75, 192, 192,1)',
                'rgba(153, 102, 255,1)',
                'rgba(255, 159, 64,1)'
            ],
            borderColor:'white',
            borderWidth: 2,
            fill:false
        }]
    },
    options: {
        title: {
                display: true,
                text: '饼状图2 - 中空同心圆'
            }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

饼状图3 - 多同心圆

var ctx3 = $('#myChart3');
var myChart = new Chart(ctx3, {
    type: 'pie',
    data: {
        labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'],
        datasets: [{
            label: '# of 战力',
            data: [100, 110, 120, 70, 140, 10],
            backgroundColor: [
                'rgba(255, 99, 132,1)',
                'rgba(54, 162, 235,1)',
                'rgba(255, 206, 86,1)',
                'rgba(75, 192, 192,1)',
                'rgba(153, 102, 255,1)',
                'rgba(255, 159, 64,1)'
            ],
            borderColor:'white',
            borderWidth: 2,
            fill:false
        },{
            label: '# of 年龄',
            data: [24, 38, 55, 93, 82, 23],
            backgroundColor: [
                'rgba(255, 99, 132,1)',
                'rgba(54, 162, 235,1)',
                'rgba(255, 206, 86,1)',
                'rgba(75, 192, 192,1)',
                'rgba(153, 102, 255,1)',
                'rgba(255, 159, 64,1)'
            ],
            borderColor:'white',
            borderWidth: 2,
            lineTension:0,
            fill:false,
            lineTension:1
        },{
            label: '# of 相貌',
            data: [10, 10, 8, 3, 5, 4],
            backgroundColor: [
                'rgba(255, 99, 132,1)',
                'rgba(54, 162, 235,1)',
                'rgba(255, 206, 86,1)',
                'rgba(75, 192, 192,1)',
                'rgba(153, 102, 255,1)',
                'rgba(255, 159, 64,1)'
            ],
            borderColor:'white',
            borderWidth: 2,
            fill:false,
            borderDash:[5]
        }]
    },
    options: {
        title: {
                display: true,
                text: '饼状图3 - 多同心圆'
            }
    }
});
1
2
3
4
5
6
7
8
9
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