用chart.js實現數據的可視化處理

利用chart.js 這一個圖像處理庫實現對象可視化處理。
1、在chart.js 的官網下載js庫：地址：https://github.com/chartjs/Chart.js/releases
2、在文件中引入js庫：

<script type="text/javascript" src="Chart.js/Chart.bundle.js"></script>

3、建立一個canvas對象

4、下面就是進行代碼的書寫：

<script>
	(function(){
		// 選擇表的類型  柱狀圖餅狀圖等等
		var type = 'doughnut';
		var data = {
			// 標籤
			labels :['喫','喝','玩'],
			datasets :[
				{
					// 圖表的數據
					data :[10,20,70],
					// 圖表數據的顏色
					backgroundColor: ['green','gray','skyblue']
				}
			]
		};

		var options = {
			// 圖表的標題
			title:{
				display: true,
				text: '花銷佔比',
			},
		};

		var ctx = document.getElementById('myChart');
		//ctx.setAttribute("width","400px")
		//ctx.setAttribute("height","400px")
		
		// 創建圖表 將所有的數據進行賦值，就能得到圖表
		var chart = new Chart(ctx, {
			type:type,
			data: data,
			options:options
		})
	})()
</script>