用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>