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

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

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

2023-03-14 22:53:25 时间

饼状图样式总览

20200615151521854.png

基本写法

首先在< 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中的参数：

参数名类型说明默认值
backgroundColorColor背景色。如果值为Array，只取Array[0]'rgba(0, 0, 0, 0.1)'
borderColorColor边框色。可取Array类型的Color'rgba(0, 0, 0, 0.1)'
borderWidthnumber略3
hoverBackgroundColorColor略undefined
hoverBorderColorColor略undefined
hoverBorderWidthnumber略undefined
labelstring标签，图例和工具提示中的数据集标签。''
dataobject[]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 - 多同心圆'
            }
    }
});

相关文章