Chart.js-柱狀圖分析（參數分析+例圖）

• 柱狀圖樣式總覽
• 基本寫法
• 參數解析
• 條形圖1 - 普通條形圖
• 條形圖2 - 水平條形圖
• 條形圖3 - 同比（放在一起比較）條形圖
• 條形圖4 - 疊加條形圖

柱狀圖樣式總覽

基本寫法

首先在< 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:{ 'left':1, 'top':... }
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}]}} });

總結

以上是生活随笔為你收集整理的Chart.js-柱状图分析（参数分析+例图）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。