Canvas之画折线和柱状图

一,说明

使用HTML画折线和柱状图,效果图如下:

二,代码片段(该完整代码地址在文章的最后面)

<canvas id="a_canvas" width="950" height="290"></canvas>

<script type="text/javascript">
			var a_canvas;
			var a_context;
			
			var b_canvas;
			var b_context;

			window.onload = function() {
				a_canvas = document.getElementById('a_canvas');
				if(a_canvas && a_canvas.getContext) {
					a_context = a_canvas.getContext('2d');
				}
				b_canvas = document.getElementById('b_canvas');
				if(b_canvas && b_canvas.getContext) {
					b_context = b_canvas.getContext('2d');
				}
				var a_data = [7, 3, 5, 5, 14, 3, 27, 35, 26, 28, 27, 17, 20, 27, 19, 23, 26, 33, 22, 30, 25, 20, 17, 15];
				var a_data1 = [4, 2, 4, 12, 8, 3, 27, 35, 26, 28, 27, 27, 20, 25, 19, 22, 24, 28, 22, 29, 25, 20, 16, 15];
				drawChartWithAnimation(a_context,a_canvas,a_data1);

				lineChart(a_context,a_canvas,a_data);
				
				var b_data = [17, 3, 15, 5, 14, 3, 27, 15, 26, 28, 27, 17, 20, 7, 19, 23, 26, 13, 22, 30, 25, 20, 17, 15];
				var b_data1 = [14, 2, 14, 12, 8, 3, 27, 15, 26, 28, 27, 27, 20, 5, 19, 22, 24, 18, 22, 29, 25, 20, 16, 15];
				drawChartWithAnimation(b_context,b_canvas,b_data1);