Chart.js-饼状图分析（参数分析+例图）-CFANZ编程社区

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

饼状图样式总览
基本写法
参数解析
饼状图2 - 中空同心圆
饼状图3 - 多同心圆

饼状图样式总览

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

基本写法

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

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

然后创建一个画布：

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

最后写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 - 普通饼状图'
            }
    }
});

参数解析

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

参数名	类型	说明	默认值
`backgroundColor`	`Color`	背景色。如果值为Array，只取Array[0]	`'rgba(0, 0, 0, 0.1)'`
`borderColor`	`Color`	边框色。可取Array类型的Color	`'rgba(0, 0, 0, 0.1)'`
`borderWidth`	`number`	略	`3`
`hoverBackgroundColor`	`Color`	略	`undefined`
`hoverBorderColor`	`Color`	略	`undefined`
`hoverBorderWidth`	`number`	略	`undefined`
`label`	`string`	标签，图例和工具提示中的数据集标签。	`''`
`data`	`object[]`	required	数据结构为数组，是柱状图对应的值。

# 饼状图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 - 普通饼状图'
            }
    }
});

饼状图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 - 中空同心圆'
            }
    }
});

饼状图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 - 多同心圆'
            }
    }
});