chart.js輕量級圖表插件使用

安裝下載

下載地址：https://github.com/chartjs/Chart.js/releases/latest

cdn LINK：https://cdnjs.com/libraries/Chart.js

文檔：https://www.chartjs.org/docs/latest/

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>

使用方法

1創建html標簽

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

注：一般來說，畫布的寬度和高度決定了圖表的尺寸。但在創建響應式圖表時，寬高的數值決定的只是比例。

2創建一個chart類的實例

var barChart = new Chart($("barChart"), {
  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)'
      ]
    }]
  }
});

//參數詳解
第一個位置參數：為之前創建的HTML節點對象，可以用DOM或Jquery獲取。
第二個位置參數：是一個Json格式的數據字典，里面內容包括以下
type 　　　　　　　　　　 圖表類型，可選如下值line（）, bar（柱狀圖）, radar, polarArea, pie（餅形圖）, doughnut 以及bubble
data

backgroundColor    　　　　　 區域顏色，與數據對象，可以使用rgba顏色對象，也可以使用rgb字符串如['#debd5a,]