【譯】用 Chart.js 作漂亮的響應式表單

數據包圍着咱們。雖然搜索引擎和其餘應用都對基於文本方式表示的數據偏心有加，但人們發現可視化是更容易理解的一種方式。今年初，SitePoint 發表了 Aurelio 的文章《 Chart.js簡介》。在深刻研究 Chart.js 的功能後，本文將會講解這篇簡介的一些重點。

入門

Chart.js 是一個基於 HTML5 canvas 的響應式、靈活的、輕量化的圖表庫。庫中提供了六種不一樣的圖表類型，每種類型都帶有一系列的自定義選項。若是這些還不夠，你還能夠創造本身的圖表類型。

Chart.js 的六種圖表類型代碼一共只有 11 kb 大，並作了 gzip 壓縮處理，另外該庫是模塊化的，你能夠僅僅使用本身須要的圖表類型，從而進一步節省了空間。下面是包含該庫的 cdnjs 連接。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

可用的設置項

從提示信息到動畫效果（校稿者注：tool tip是指鼠標移動到某個元素上彈出的提示信息），Chart.js 容許你改變圖表的幾乎全部特徵。在本節，我將會修改一些設置，以展現 Chart.js 是如何被建立出來的。咱們將從下面的 HTML 代碼開始：

<canvas id="canvas"></canvas>

對於首次展現，我會建立一個折線圖。爲了使圖表有意義，這裏會有幾個須要設置的基本選項。折線圖須要一個標籤數組和數據集。標籤會顯示在 X 軸。我已經爲折線圖模擬了一些數據，這些數據被分開放到一個數組裏面去，每一個數據有本身的填充顏色、折線和點集。

在這個例子中，我將 fillColor設置爲透明。若是你不設置 fillColor 的值，將默認設置爲黑色或者灰色。這一樣適用於其餘值。色彩使用 RGBA、RGB、hex 或 HSL 格式定義，與 CSS 是同樣的。

 1 var lineData = {
 2   labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 
 3            'Data 5', 'Data 6', 'Data 7'],
 4   datasets: [{
 5     fillColor: 'rgba(0,0,0,0)',
 6     strokeColor: 'rgba(220,180,0,1)',
 7     pointColor: 'rgba(220,180,0,1)',
 8     data: [20, 30, 80, 20, 40, 10, 60]
 9   }, {
10     fillColor: 'rgba(0,0,0,0)',
11     strokeColor: 'rgba(151,187,205,1)',
12     pointColor: 'rgba(151,187,205,1)',
13     data: [60, 10, 40, 30, 80, 30, 20]
14   }]
15 }

設置全局選項

在代碼中我已經設置了一些全局值。animationSteps 決定了動畫的持續時間。根據須要，你能夠修改更多的選項，好比 scaleLineColor 和 scaleIntegersOnly。我建議瀏覽Chart.js 文檔查看庫中提供的其餘選項。

 1 Chart.defaults.global = {
 2   animationSteps : 50,
 3   tooltipYPadding : 16,
 4   tooltipCornerRadius : 0,
 5   tooltipTitleFontStyle : 'normal',
 6   tooltipFillColor : 'rgba(0,160,0,0.8)',
 7   animationEasing : 'easeOutBounce',
 8   scaleLineColor : 'black',
 9   scaleFontSize : 16
10 }

設置專有的圖表選項

除了全局選項，還有一些針對特定圖表類型的配置選項。在這個折線圖中，我將會設置這類選項，但願對你有所啓發：

1 var ctx = document.getElementById('canvas').getContext('2d');
2 var lineDemo = new Chart(ctx).Line(lineData, {
3   responsive: true,
4   pointDotRadius: 10,
5   bezierCurve: false,
6   scaleShowVerticalLines: false,
7   scaleGridLineColor: 'black'
8 });

Chart.js 生成的圖表默認爲非響應式。將 responsive 設置爲 true 可使其轉化爲響應式圖表。若是你須要讓每一個圖表都成爲響應式的，我推薦設置全局值，就像這樣：

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 var dData = function() {
 2   return Math.round(Math.random() * 90) + 10;
 3 };
 4 
 5 var barData = {
 6   labels: ['dD 1', 'dD 2', 'dD 3', 'dD 4',
 7            'dD 5', 'dD 6', 'dD 7', 'dD 8'],
 8   datasets: [{
 9     fillColor: 'rgba(0,60,100,1)',
10     strokeColor: 'black',
11     data: [dData(), dData(), dData(), dData(),
12            dData(), dData(), dData(), dData()]
13   }]
14 }

 

如今是時候編寫代碼來爲咱們的圖表刪除與添加柱形了。開始時咱們初始化 index 的值爲 11，我使用了兩個方法：removeData() 和 addData(valuesArray,label)。調用實例的 removeData() 方法刪除圖表全部數據集的第一個值。在 barChartDemo 這個例子中，數據集的第一個值被移除了。調用 addData() 順着標籤傳遞一個數組值，在圖表的最後增長一個新的數據節點。下面的代碼片斷每 3 秒鐘會更新一次圖表。

 1 var index = 11;
 2 var ctx = document.getElementById('canvas').getContext('2d');
 3 var barDemo = new Chart(ctx).Bar(barData, {
 4   responsive: true
 5 });
 6 
 7 setInterval(function() {
 8   barDemo.removeData();
 9   barDemo.addData([dData()], 'dD ' + index);
10   index++;
11 }, 3000);

 

另外一個更新圖表數值的方法是直接設置數值。在下面的例子中，第一行是將第一個數據集的第二個柱形的數值設爲 60。若是你在這時更新，柱形會經過動畫將其當前值變爲 60。

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也爲每一個圖表類型提供了專屬的自定義設置。若是當前可用的圖表沒法知足你的需求，你還能夠創造本身的圖表類型。我推薦你瀏覽文檔，加深關於該庫什麼能夠作，什麼沒法作的認識。

---

本文首發至 伯樂在線 - 感謝 Justin Wu 校稿。
英文出處：Monty Shokeen。

已同步至 Github，歡迎 Star 關注更新。