資料包圍著我們。雖然搜尋引擎和其他應用都對基於文字方式表示的資料偏愛有加，但人們發現視覺化是更容易理解的一種方式。今年初，SitePoint 發表了 Aurelio 的文章《 Chart.js簡介》。在深入研究 Chart.js 的功能後，本文將會講解這篇簡介的一些重點。
入門
Chart.js 是一個基於 HTML5 canvas 的響應式、靈活的、輕量化的圖表庫。庫中提供了六種不同的圖表型別，每種型別都帶有一系列的自定義選項。如果這些還不夠，你還可以創造自己的圖表型別。
Chart.js 的六種圖表型別程式碼一共只有 11 kb 大，並做了 gzip 壓縮處理，另外該庫是模組化的，你可以僅僅使用自己需要的圖表型別，從而進一步節省了空間。下面是包含該庫的 cdnjs 連結。
|
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> |
可用的設定項
從提示資訊到動畫效果（校稿者注：tool tip是指滑鼠移動到某個元素上彈出的提示資訊），Chart.js 允許你改變圖表的幾乎所有特徵。在本節，我將會修改一些設定，以展示 Chart.js 是如何被建立出來的。我們將從下面的 HTML 程式碼開始：
|
1 |
<canvas id="canvas"></canvas> |
對於首次展示，我會建立一個折線圖。為了使圖表有意義，這裡會有幾個需要設定的基本選項。折線圖需要一個標籤陣列和資料集。標籤會顯示在 X 軸。我已經為折線圖模擬了一些資料，這些資料被分開放到一個陣列裡面去，每個資料有自己的填充顏色、折線和點集。
在這個例子中，我將 fillColor設定為透明。如果你不設定 fillColor 的值，將預設設定為黑色或者灰色。這同樣適用於其他值。色彩使用 RGBA、RGB、hex 或 HSL 格式定義，與 CSS 是一樣的。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var lineData = { labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6', 'Data 7'], datasets: [{ fillColor: 'rgba(0,0,0,0)', strokeColor: 'rgba(220,180,0,1)', pointColor: 'rgba(220,180,0,1)', data: [20, 30, 80, 20, 40, 10, 60] }, { fillColor: 'rgba(0,0,0,0)', strokeColor: 'rgba(151,187,205,1)', pointColor: 'rgba(151,187,205,1)', data: [60, 10, 40, 30, 80, 30, 20] }] } |
設定全域性選項
在程式碼中我已經設定了一些全域性值。animationSteps 決定了動畫的持續時間。根據需要，你可以修改更多的選項，比如 scaleLineColor 和 scaleIntegersOnly。我建議瀏覽 Chart.js 文件檢視庫中提供的其他選項。
|
1 2 3 4 5 6 7 8 9 10 |
Chart.defaults.global = { animationSteps : 50, tooltipYPadding : 16, tooltipCornerRadius : 0, tooltipTitleFontStyle : 'normal', tooltipFillColor : 'rgba(0,160,0,0.8)', animationEasing : 'easeOutBounce', scaleLineColor : 'black', scaleFontSize : 16 } |
設定專有的圖表選項
除了全域性選項，還有一些針對特定圖表型別的配置選項。在這個折線圖中，我將會設定這類選項，希望對你有所啟發：
|
1 2 3 4 5 6 7 8 |
var ctx = document.getElementById('canvas').getContext('2d'); var lineDemo = new Chart(ctx).Line(lineData, { responsive: true, pointDotRadius: 10, bezierCurve: false, scaleShowVerticalLines: false, scaleGridLineColor: 'black' }); |
Chart.js 生成的圖表預設為非響應式。將 responsive 設定為 true 可以使其轉化為響應式圖表。如果你需要讓每個圖表都成為響應式的，我推薦設定全域性值，就像這樣：
|
1 |
Chart.defaults.global.responsive = true; |
下面你會看見這個折線圖的示例：
See the Pen Chart.js Responsive Line Chart Demo by SitePoint (@SitePoint) on CodePen.
增加與移除動態資料
有時你需要展示時刻變化的資料。股票市場便是這個應用場景的典型例子。這本節中我將會建立一個柱形圖，並且在動態刪除資料的同時增加資料。我會使用一些隨機資料，並在這個例子中通過柱形圖來展示資料。本例中的大部分程式碼與上一個例子相似。一旦我們擁有自己的 HTML（與上一個例子一樣），便可以新增自己的 JavaScript。
首先我們需要編寫程式碼將動態資料填充進圖表。我使用function表示式生成隨機值，然後將其賦給一個變數 dData。這些值會在需要變化時為我們提供隨機的資料。像之前的例子一樣，我建立了一個標籤陣列和資料集，並設定了一個任意的 fillColor。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var dData = function() { return Math.round(Math.random() * 90) + 10; }; var barData = { labels: ['dD 1', 'dD 2', 'dD 3', 'dD 4', 'dD 5', 'dD 6', 'dD 7', 'dD 8'], datasets: [{ fillColor: 'rgba(0,60,100,1)', strokeColor: 'black', data: [dData(), dData(), dData(), dData(), dData(), dData(), dData(), dData()] }] } |
現在是時候編寫程式碼來為我們的圖表刪除與新增柱形了。開始時我們初始化 index 的值為 11，我使用了兩個方法：removeData() 和 addData(valuesArray,label)。呼叫例項的 removeData() 方法刪除圖表所有資料集的第一個值。在 barChartDemo 這個例子中，資料集的第一個值被移除了。呼叫 addData() 順著標籤傳遞一個陣列值，在圖表的最後增加一個新的資料節點。下面的程式碼片段每 3 秒鐘會更新一次圖表。
|
1 2 3 4 5 6 7 8 9 10 11 |
var index = 11; var ctx = document.getElementById('canvas').getContext('2d'); var barDemo = new Chart(ctx).Bar(barData, { responsive: true }); setInterval(function() { barDemo.removeData(); barDemo.addData([dData()], 'dD ' + index); index++; }, 3000); |
另一個更新圖表數值的方法是直接設定數值。在下面的例子中，第一行是將第一個資料集的第二個柱形的數值設為 60。如果你在這時更新，柱形會通過動畫將其當前值變為 60。
|
1 2 |
barDemo.datasets[0].bars[2].value = 60; barDemo.update(); |
這裡是柱形圖的示例（由SitePoint在CodePen上建立）：
See the Pen Chart.js Responsive Bar Chart Demo by SitePoint (@SitePoint) on CodePen.
結論
這個教程覆蓋了關於 Chart.js 的一些重要功能。第一個例子展示了一些全域性設定的使用，同時，Chart.js也為每個圖表型別提供了專屬的自定義設定。如果當前可用的圖表無法滿足你的需求，你還可以創造自己的圖表型別。我推薦你瀏覽文件，加深關於該庫什麼可以做，什麼無法做的認識。