饼状图样式总览
基本写法
首先在< 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 - 多同心圆' } } });
