Chart.js-線形圖分析（參數分析+例圖）
線形圖樣式總覽
基本寫法
首先在< 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: 'line',
data: {
labels: ['徐鳳年', '裴南葦', '曹長卿', '李淳罡', '王仙芝', '溫華'],
datasets: [{
label: '# of 戰力',
data: [10, 11, 12, 14, 7, 1],
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: 'rgba(0, 0, 0, 0.2)',
borderWidth: 1,
}]
},
options: {
title: {
display: true,
text: '線形圖2 - 普通線面圖'
}
}
});
畫出的柱狀圖如下圖：
參數解析
【注意】以下都是寫入在datasets中的參數：
| 參數名 | 類型 | 說明 | 默認值 |
|---|---|---|---|
backgroundColor |
Color |
背景色。如果值爲Array，只取Array[0] | 'rgba(0, 0, 0, 0.1)' |
borderColor |
Color |
邊框色。可取Array類型的Color | 'rgba(0, 0, 0, 0.1)' |
borderDash |
number[] |
設置虛線。若設爲[1,3],代表以1和3作爲缺失繪製虛線 | [] |
borderWidth |
number |
略 | 3 |
cubicInterpolationMode |
string |
繪製曲線的方法。可選值爲default和monotone。兩個參數繪製曲線的算法不同 |
'default' |
fill |
boolean|string |
是否填充曲線底部 | true |
hoverBackgroundColor |
Color |
略 | undefined |
hoverBorderCapStyle |
string |
略 | undefined |
hoverBorderColor |
Color |
略 | undefined |
hoverBorderDash |
number[] |
略 | undefined |
hoverBorderDashOffset |
number |
略 | undefined |
hoverBorderJoinStyle |
string |
略 | undefined |
hoverBorderWidth |
number |
略 | undefined |
label |
string |
標籤，圖例和工具提示中的數據集標籤。 | '' |
lineTension |
number |
曲線的平滑度。爲0時，繪製直線 | 0.4 |
pointBackgroundColor |
Color |
略 | 'rgba(0, 0, 0, 0.1)' |
pointBorderColor |
Color |
略 | 'rgba(0, 0, 0, 0.1)' |
pointBorderWidth |
number |
略 | 1 |
pointHitRadius |
number |
略 | 1 |
pointHoverBackgroundColor |
Color |
略 | undefined |
pointHoverBorderColor |
Color |
略 | undefined |
pointHoverBorderWidth |
number |
略 | 1 |
pointHoverRadius |
number |
略 | 4 |
pointRadius |
number |
略 | 3 |
pointRotation |
number |
略 | 0 |
pointStyle |
string|Image |
點的類型。可選值有：'circle'、 'cross'、 'crossRot'、 'dash'、 'line'、 'rect'、 'rectRounded'、 'rectRot'、 'star'、 'triangle' | 'circle' |
showLine |
boolean |
是否顯示曲線。否則僅顯示點 | undefined |
spanGaps |
boolean |
如果有缺失的點，是否選擇中斷畫圖 | undefined |
steppedLine |
boolean|string |
步進線。可選值有：false、 true、 'before'、 'after'、 'middle' | false |
線形圖1 - 普通線形圖（直線、曲線、虛線）
var ctx1 = $('#myChart1');
var myChart = new Chart(ctx1, {
type: 'line',
data: {
labels: ['徐鳳年', '裴南葦', '曹長卿', '李淳罡', '王仙芝', '溫華'],
datasets: [{
label: '# of 戰力',
data: [100, 110, 120, 70, 140, 10],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor:'rgba(153, 102, 255, 0.5)',
borderWidth: 2,
fill:false
},{
label: '# of 年齡',
data: [24, 38, 55, 93, 82, 23],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor:'red',
borderWidth: 2,
lineTension:0,
fill:false
},{
label: '# of 相貌',
data: [100, 10, 80, 3, 5, 4],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor:'rgba(255, 206, 86, 0.9)',
borderWidth: 2,
fill:false,
borderDash:[5]
}]
},
options: {
title: {
display: true,
text: '線形圖1 - 普通線形圖（直線、曲線、虛線）'
}
}
});
線形圖2 - 普通線面圖
var ctx2 = $('#myChart2');
var myChart = new Chart(ctx2, {
type: 'line',
data: {
labels: ['徐鳳年', '裴南葦', '曹長卿', '李淳罡', '王仙芝', '溫華'],
datasets: [{
label: '# of 戰力',
data: [10, 11, 12, 14, 7, 1],
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: 'rgba(0, 0, 0, 0.2)',
borderWidth: 1,
}]
},
options: {
title: {
display: true,
text: '線形圖2 - 普通線面圖'
}
}
});
線形圖3 - 步進線（像極了哈夫曼編碼）
var ctx3 = $('#myChart3');
var myChart = new Chart(ctx3, {
type: 'line',
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,
steppedLine:'true'
},{
label: '# of 才華',
data: [2, 4, 2, 4, 2, 4],
type:'line',
backgroundColor:'rgba(0, 0, 0, 0.1)',
borderColor:'rgba(0, 99, 132, 1)',
steppedLine:'middle'
}]
},
options: {
title: {
display: true,
text: '線形圖3 - 步進線（像極了哈夫曼編碼）'
}
}
});
線形圖4 - 點狀線
var ctx4 = $('#myChart4');
var myChart = new Chart(ctx4, {
type: 'line',
data: {
labels: ['徐鳳年', '裴南葦', '曹長卿', '李淳罡', '王仙芝', '溫華'],
datasets: [{
label: '# of 戰力',
data: [10, 11, 12, 14, 7, 1],
borderColor: 'green',
borderWidth: 1,
showLine:false
},{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
type:'line',
backgroundColor:'rgba(0, 0, 0, 0.1)',
borderColor:'rgba(255, 99, 132, 1)',
showLine:false,
pointStyle:'rect'
}]
},
options: {
title: {
display: true,
text: '線形圖4 - 點狀線'
}
}
});
線形圖5 - 線形疊加圖
var ctx5 = $('#myChart5');
var myChart = new Chart(ctx5, {
type: 'line',
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)'
]
},{
label: '# of Votes',
data: [12, 1, 3, 5, 2, 3],
type:'line',
backgroundColor:'rgba(54, 162, 235, 0.2)',
borderColor:'rgba(75, 192, 192, 1)',
}]
},
options: {
title: {
display: true,
text: '線形圖5 - 線形疊加圖'
},
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});