圖表Chart.js入門教程

這裡寫圖片描述

使用Chart.js來製作各種各樣的圖表。下面將為你全方位介紹chart.js。chart.js最與眾不同之處是,它可以在HTML5 Canvas上面繪製出色的響應式圖表。

Chart.js允許你把不同的圖表型別混合在一起,然後在上面繪製日期、對數或自定義比例的資料。還可以在更改資料或更新顏色時應用運用框外動畫。

下面將教你安裝chart.js,然後介紹配置選項和其他的方面。

1. 安裝和使用

你可以從GitHub裡面下載最新版本的Chart.js或者在你的專案中使用CDN link。或者你也可以通過以下命令在npm或bower中來安裝chart.js。

npm install chart.js --save
bower install chart.js --save

Chart.js有兩種不同的版本。常規版本的Chart.js和 Chart.min.js,附帶chart.js庫的同時還帶著顏色解析器。如果你想使用這個版本並且在你的圖表中使用時間軸,你需要在安裝Chart.js之前安裝上Moment.js。

而另一個版本Chart.bundle.js 和Chart.bundle.min.js早就包含了Moment.js 。你唯一需要注意的就是兩個版本只能安裝一個,否則會引起錯誤。

一旦你決定好使用哪個版本之後,你就可以在你的專案中引入Chart.js了。

<script src="path/to/Chart.min.js"></script>
<script>
var barChart = new Chart({...})
</script>

2. 建立圖表

下面將以上面的人口表為例來建立條形圖。Y軸表示人口數量,X軸表示國家。下面將建立一個id名為popChart的畫布。

<canvas id="popChart" width="600" height="400"></canvas>

一般來說,畫布的寬度和高度決定了圖表的尺寸。在建立響應式圖表時,寬高比由畫布的寬度和高度決定。

接下來,你需要例項化Chart類。這可以通過傳遞要繪製圖表的畫布的節點,jQuery例項或2d上下文來完成。

var popCanvas = $("#popChart");
var popCanvas = document.getElementById("popChart");
var popCanvas = document.getElementById("popChart").getContext("2d");

接下來你需要做的就是把所有的引數傳遞給構造器。

var barChart = new Chart(popCanvas, {
type: 'bar',
data: {
labels: ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],
datasets: [{
label: 'Population',
data: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398],
backgroundColor: [
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)',
'rgba(255, 159, 64, 0.6)',
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)'
]
}]
}
});

第二個引數傳遞的物件包含了Chart.js建立圖表的所有資訊。type鍵指定圖表型別,可以取下列值:line, bar, radar, polarArea, pie, doughnut 以及bubble。data鍵包含了要用到的所有資料。background鍵圖表的背景色。預設值是’rgba(0,0,0,0.1)’。

每個圖表都有自己的特定鍵,你可以用它們來控制圖表的外觀。這張圖表是上面程式碼最終呈現效果。

這裡寫圖片描述

3. 配置選項
Chart.js庫允許你個性化定製你的圖表。例如,你可以改變上面圖表的顏色和邊框寬度。你還可以通過更改字型大小和顏色來修改工具提示欄和圖例。在這個小節裡面你將會學習到這些設定樣式的鍵。

Chart.js庫具有四個特殊的全域性鍵,可用於更改圖表中的所有字型。這些鍵是 defaultFontFamily, defaultFontSize, defaultFontStyle,和 defaultFontColor。字型大小以畫素為單位指定,不適用於 radialLinear刻度點標籤。同樣, defaultFontStyle不適用於工具提示標題或頁尾。