Chart.js使用起來相比D3.js更加容易和靈活，很適合用來實現一些基本的圖表展示。
Chart.js官網：www.chartjs.org/
最新版本：v2.x
安裝：參考官方文件
官方文件對於各種圖表的例子都是比較淺顯的介紹，對於一些引數缺少具體的例子。這裡主要以Line Chart為例對相關引數配置進行分析。
1. 基礎樣式
這裡統計一個學生的每個月月考成績（英語和數學），通過曲線圖進行展示。
程式碼如下：
<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
// x-axis資料 月數
var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// y-axis資料 成績
var english = [86, 78, 91, 84, 88, 90, 77, 70, 87, 97];
var math = [97, 91, 95, 88, 81, 90, 78, 84, 90, 77];
// 獲取canvas作為繪圖的上下文
var ctx = document.getElementById('myChart').getContext('2d');
// 生成對應的圖表
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: month,
datasets: [{
label: 'English',
data: english
},
{
label: "Math",
data: math,
}]
}
});
</script>
複製程式碼上述程式碼可以繪製出最簡單的圖表，如下圖所示:
data物件中，有三個屬性：
-
type：指定圖表型別。 -
datasets：指定資料集合。datasets中的每個物件就是一組資料集合，本例子中就是對應的每條曲線。 -
options: 配置引數。用來配置圖表的額外資訊，如圖表的標題，x軸和y軸的設定等。
2. 修改圖表樣式
這裡修改線條的預設顏色，取消線條下部的顏色填充，增加圖表的標題，設定圖例的樣式，修改tooltip的提示樣式。
詳細引數配置請參考：Line
程式碼如下：
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: month,
datasets: [{
label: 'English',
data: english,
// 線條顏色
borderColor: "rgba(68,190,190,1)",
// 填充顏色
fill: true,
// 線條下方的填充顏色
backgroundColor: "rgba(68,190,190,.3)"
},
{
label: "Math",
data: math,
borderColor: "rgba(250,150,30,1)",
// 取消填充後，只有圖例中會顯示相應背景色
backgroundColor: "rgba(250,150,30,.3)",
// 取消填充
fill: false
}]
},
options: {
// 圖表標題
title: {
display: true,
text: "月考成績曲線圖"
},
// 圖例設定
legend: {
labels: {
padding: 30,
// 使用圓形樣式
usePointStyle: true
},
// 顯示位置
position: 'bottom'
},
// tooltip提示樣式
tooltips: {
enabled: true,
// 同時顯示x軸上的資料
// 這裡滑鼠移到對應點上會同時顯示english和math的成績
mode: 'index',
// 通過回撥修改tooltips的標題
callbacks: {
title: function (item) {
return "第" + item[0].xLabel + "月"
}
}
}
}
});
複製程式碼修改後圖表如下圖所示：
修改後的tooltip顯示效果如下圖所示：
這裡修改了tooltip的標題，並同時顯示該x軸位置的所有資料，english和math。
更多tooltip的配置請參考：Tooltips
目前y軸的值是直接從70開始，這裡預設選取了y軸的最小值作為起始值。如果要改為從其他值開始，這裡就要對options中的scales屬性進行修改。
3. Scales
scales可以對x軸和y軸的對應的屬性進行修改，其中ticks屬性可以修改對應軸的起始值。
程式碼如下：
options: {
// 圖表標題
title: {
display: true,
text: "月考成績曲線圖"
},
...
scales: {
// x軸
xAxes: [{
// 背景網格
gridLines: {
// 取消x軸的豎線
display: false,
// 設定x軸線顏色
color: "black",
},
// x軸標題
scaleLabel: {
display: true,
labelString: "考試月數",
},
}],
// y軸
yAxes: [{
gridLines: {
color: "black",
// 以點線顯示
borderDash: [2, 5],
},
scaleLabel: {
display: true,
labelString: "分數",
},
// 設定起止資料和步長
ticks: {
min: 60,
max: 100,
stepSize: 5
}
}]
}
}
複製程式碼修改後圖表如下圖所示：
