柱状图样式总览
基本写法
首先在< script >标签里面引入chart.js：
<script src="chart.js/Chart.js"></script>
然后创建一个画布：
<canvas id="myChart" width="400" height="400"></canvas>
最后写js代码：
var ctx = $('#myChart'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'], datasets: [{ label: '# of 战力', data: [10, 11, 12, 14, 7, 1], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ '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)' ], borderWidth: 1, }] }, options: { title: { display: true, text: '条形图1 - 普通条形图' } } });
画出的柱状图如下图：
参数解析
【注意】以下都是写入在datasets中的参数：
| 参数名称 | 类型 | 默认值 | 说明 |
backgroundColor |
Color |
'rgba(0, 0, 0, 0.1)' |
单条图形图背景颜色 |
borderColor |
Color |
'rgba(0, 0, 0, 0.1)' |
单条边框的颜色 |
borderSkipped |
string |
'bottom' |
隐藏边界，默认隐藏下方的边界。可选值有：'top'、'bottom'、'left'、'right'、false |
borderWidth |
number|object |
0 |
边界的宽度，默认为0。当想为四个边界设置不同值时，用borderWidth:{ |
data |
object[] |
required | 数据结构为数组，是柱状图对应的值。 |
hoverBackgroundColor |
Color |
undefined |
类似于css的hover |
hoverBorderColor |
Color |
undefined |
类似于css的hover |
hoverBorderWidth |
number |
1 | 类似于css的hover |
label |
string |
'' |
标签，图例和工具提示中的数据集标签。 |
barPercentage |
number |
0.9 |
取值在0-1，bar的宽度占比 |
categoryPercentage |
number |
0.8 |
取值在0-1，标签的宽度占比。【注意】bar是在标签中，即标签是bar的容器。 |
barThickness |
number|string |
设置每个bar的宽度 |
maxBarThickness |
number |
bar的最大宽度 | |
minBarLength |
number |
bar的最小高度 |
【注意】以下参数写在options中：
title整个表的标题。scales–>stacked控制多个表在X或Y方向上重叠。见图3，图4的代码。
见代码：
options: { title: { display: true, text: '条形图4 - 叠加条形图' }, scales: { xAxes: [{ stacked: true, }], yAxes: [{ stacked: true }] } }
【注意】以下参数写在Chart()的第二个参数中：
type表的类型。图2的水平条形统计图，type值为"horizontalBar"
条形图1 - 普通条形图
var ctx1 = $('#myChart1'); var myChart = new Chart(ctx1, { type: 'bar', data: { labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'], datasets: [{ label: '# of 战力', data: [10, 11, 12, 14, 7, 1], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ '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)' ], borderWidth: 1, }] }, options: { title: { display: true, text: '条形图1 - 普通条形图' } } });
条形图2 - 水平条形图
var ctx2 = $('#myChart2'); var myChart = new Chart(ctx2, { type: 'horizontalBar', data: { labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'], datasets: [{ label: '# of 战力', data: [10, 11, 12, 14, 7, 1], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ '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)' ], borderWidth: 1, }] }, options: { title: { display: true, text: '条形图2 - 水平条形图' } } });
条形图3 - 同比（放在一起比较）条形图
var ctx3 = $('#myChart3'); var myChart = new Chart(ctx3, { type: 'bar', data: { labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'], datasets: [{ label: '# of 战力', data: [10, 11, 12, 14, 7, 1], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ '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)' ], borderWidth: 1, },{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], type:'bar', backgroundColor:'rgba(0, 0, 0, 0.1)', borderColor:'rgba(255, 99, 132, 1)', }] }, options: { title: { display: true, text: '条形图3 - 同比（放在一起比较）条形图' } } });
条形图4 - 叠加条形图
var ctx4 = $('#myChart4'); var myChart = new Chart(ctx4, { type: 'bar', data: { labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'], datasets: [{ label: '# of 战力', data: [10, 11, 12, 14, 7, 1], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ '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)' ], borderWidth: 1, },{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], type:'bar', backgroundColor:'rgba(0, 0, 0, 0.1)', borderColor:'rgba(255, 99, 132, 1)', }] }, options: { title: { display: true, text: '条形图4 - 叠加条形图' }, scales: { xAxes: [{ stacked: true, }], yAxes: [{ stacked: true }] } } });
