Chart.js是一個簡單、面向物件、為設計者和開發者準備的圖表繪製工具庫。

相信大部分人都一樣，看到一大筐用文字或者表格形式呈現的資料就頭疼。因為這種呈現方式也太無聊了吧。。。而且這對於我們處理原始資料也造成一定的困難。

不信？我反手就是一個例子：

更進一步說，柱狀圖能夠直觀的顯示出趨勢或者事實。以這張表格為例，柱狀圖會直觀地告訴你美國的人口是孟加拉的兩倍，中國的人口是俄羅斯的10倍。你只需要看看柱狀圖的長度就可以得出這些資訊。雖然這個表裡只有10個國家，不出意料的話，我猜你大概也會直接忽略掉它。。。。正常情況下，人們只會看一兩個他們感興趣的國家。但是如果這張表被轉換為柱狀圖的話，人們看一眼就會得到有關人口數量分佈的大致資訊。

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

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

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

安裝和使用

你可以從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>

建立圖表

下面將以上面的人口表為例來建立條形圖。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)'。

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

如果你想讓圖表在所有的裝置上都顯示一樣的尺寸，只需將responsive的值設為false。

配置選項

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

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

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = 'blue';
 

下面的圖表應用了上面這些全域性字型設定。通過全域性鍵來修改樣式將有助於讓你的網站風格保持一致。

你也可以修改圖示中的圖例。配置選項將需要傳遞到 options.legend名稱空間中。您也可以為所有圖表指定全域性圖例選項 Chart.defaults.global.legend。圖例的位置受position鍵的控制，它的值 可以是top，left，bottom，和right。你也可以使用display 鍵顯示或隱藏圖例。

除了圖例之外，你還可以控制圖例標籤的外觀。其配置選項在圖例配置下方的label鍵中。可以使用boxWidth 鍵指定顏色框的寬度。當沒有指定值時，使用預設值40。 

預設情況下，字體系列，字型大小，字型顏色和字型樣式值都將從全域性配置繼承。但是，你可以使用fontSize，fontStyle和fontFamily，fontColor為它們指定自己的值。

var barChart = new Chart(popCanvas, {
    type: 'bar',
    data: data,
      options: {
        legend: {
          display: true,
          position: 'bottom',
          labels: {
            boxWidth: 80,
            fontColor: 'rgb(60, 180, 100)'
          }
        }
    }
});

你可以使用options.tooltips名稱空間來控制圖表的本地繪製方式  。類似地， Chart.defaults.global.tooltips可以用於設定全域性工具提示欄的外觀。可以使用enabled 鍵來指定是否向用戶呈現工具提示。將將其設定為false 將禁用工具提示。該鍵的預設值為true。 

你還可以使用intersect 鍵控制工具提示的顯示/隱藏行為。當設定為true（也是此鍵的預設值）時，僅當滑鼠指標與條形圖進行互動時才會顯示工具提示。設定時false，根據mode 鍵指定的行為顯示工具提示。 

Mode 鍵用於確定在工具提示欄中顯示哪些元素。其預設值為nearest。當你設定intersect為false時，將顯示最接近滑鼠指標的欄的工具提示。

就像圖例一樣，你還可以控制工具提示欄的基於不同字型的屬性的值。唯一的區別是，必須為工具提示的標題、正文和頁尾元素單獨設定值。 

例如，你可以通過改變 bodyFontFamily， bodyFontSize，  bodyFontStyle，和  bodyFontColor來改變提示欄的字型屬性。工具提示欄的標題和頁尾還有titleMarginBottom和footerMarginTop屬性。它們可以用於在標題和頁尾與工具提示欄的正文之間新增一些額外的空間。 

同樣，你可以使用xPadding和 yPadding屬性向工具提示欄的左/右和上下兩邊新增額外的填充  。

你也可以使用caretSize 鍵控制工具欄提示箭頭的大小。也可以使用backgroundColor 鍵更改工具提示欄的背景  。

var barChart = new Chart(popCanvas, {
    type: 'bar',
    data: data,
      options: {
        tooltips: {
          cornerRadius: 0,
          caretSize: 0,
          xPadding: 16,
          yPadding: 10,
          backgroundColor: 'rgba(0, 150, 100, 0.9)',
          titleFontStyle: 'normal',
          titleMarginBottom: 15
        }
    }
});

上述選項將隱藏插入符號，因為caretSize被設定為0.

總結

以上給大家提供了chart.js庫的基本介紹，然後展示瞭如何建立一個條形表。相信你也學會了各項配置吧~

雖然在這篇文章中只介紹了條形表，實際上上面的配置適用於所有型別的圖表噠。

JavaScript已經成為在web上工作的"de facto" 語言之一。它不是沒有它的學習曲線，它有很多框架和庫等著你去學習。如果你正在尋找額外的資源來學習或在你的工作中使用，請檢視我們在Envato marketplace中可用的內容。