Chart.js入門教程

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中可用的內容。