前言：之前介紹了統計圖示操作的G2，這一個插件個人認為功能相對不如G2插件強大，但是這一個插件的大小略微小一點為398k，大小還是不可忽視。另外這一個插件自己可以操作的空間相對大很多，不過都不是自己的理想選擇。雖然好用，但是代價相對太大，是以還是得學好canvas，自己寫啊。
插件官方位址
http://www.chartjs.org/docs/latest/
簡單的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
<style type="text/css">
#container {
width: px;
margin: px auto;
}
</style>
<script type="text/javascript" src="chart.js"></script>
</head>
<body>
<div id="container">
<canvas id="canvas" width="400" height="200"></canvas>
</div>
<script type="text/javascript">
// 擷取畫布
var oCanvas = document.getElementById("canvas").getContext('2d');
// 建立對象
var oChart = new Chart(oCanvas, {
type: 'line', //圖示類型
data : {
labels: ['2013', '2014', '2015', '2016', '2017', '2018'], //x軸
datasets: [{
label: '時間-銷量', //title
data: [, , , , , ], //資料
backgroundColor: [ //背景顔色,可以不設定，為預設
'rgba(255, 99, 132, 0.2)',
],
borderColor: [ //邊框顔色,可以不設定，為預設
'rgba(255,99,132,1)',
],
borderWidth:
}]
},
options: {
}
})
</script>
</body>
</html>
效果圖
統計圖示操作之Chart 
![Vue項目 - 單檔案元件和Vue中的路由[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)