使用highcharts实现的图表实例

highcharts 柱状图与折线图源码：

<  src=\"http://code.jquery.com/jquery-1.9.1.min.js\"></ >
<  src=\"http://code.highcharts.com/highcharts.js\"></ >
<  src=\"http://code.highcharts.com/modules/exporting.js\"></ >
	<  type=\"text/ \" src=\"http://sandbox.runjs.cn/uploads/rs/353/cbcvzss3/grouped-categories.js\"></ >
<div id=\"container\" style=\"min-width: 310px; height: 400px; margin: 0 auto\"></div>
< >
$(function() {
	$(\'#container\').highcharts({
		chart: {
			type: \'\'
		},
		 : {
			text: \'\'
		},
		credits: {
			text: \'\'
		},
		xAxis: {
			
			labels: {
				//align : \'center\',
				rotation: 90,
				//staggerLines: 2,
				//step : 2,
				style: {
					color: \'#6D869F\',
					fontWeight: \'bold\'
				}
			},
			categories: [\'2014年1月\', \'2014年2月\', \'2014年3月\', \'2014年4月\', \'2014年5月\', \'2014年6月\', \'2014年7月\', \'2014年8月\', \'2014年9月\', \'2014年10月\', \'2014年11月\', \'2014年12月\'],
			
			
		},
		yAxis: {
			min: 0,
			 : {
				text: \'项次\'
			}
		},
		tooltip: {
		
			formatter: function() {
									
				return \'<b>\'+ this.x +\'</b><br/>\'+
					this.series.name +\': \'+ this.y +\'<br/>\'
					//+\'Total: \'+ this.point.stackTotal;
				
			}
		},
		plotOptions: {
			column: {
				//stacking: \'normal\',
				pointPadding: 0,
				borderWidth: 0
			}
		},
		series: [{
			name: \'已完成\',
			type: \'column\',
			color: \'blue\',
			data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

		},
		{
			name: \'所有\',
			type: \'column\',
			color: \'red\',
			data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

		},{
			name: \'已完成\',
			type: \'line\',
			color: \'blue\',
			// edTo : \'previous\',
			data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

		},{
			name: \'所有\',
			type: \'line\',
			color: \'red\',
			// edTo : \'previous\',
			data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

		}]
	});
});
</ >

在线运行