Highcharts报表之柱状图

导入highcharts.js、highcharts.src.js、excanvas.compiled.js三个js文件，下面为js部分

var chart;
	function showHighCharts(data) {
		var options= {
			chart: {
				renderTo: 'container1',//对应div的id
				defaultSeriesType: 'column'//默认为柱状图
		//		type: 'column'
			},
			title: {
				text: 'HighCharts Demo之柱状图',//设置标题栏名称
				style: {
					margin: '10px 100px 0 0', // center it
					font: 'normal 25px Verdana, sans-serif'//设置标题字体的样式
				}
			},
			xAxis: {
				categories: [ //设置X轴坐标值
						'<=30',
						'31-60',
						'61-120',
						'>=121'
						],
					labels: {//X轴坐标值样式
	//					rotation: -45,
	//					align: 'right',
						style: {
							 font: 'normal 14px Verdana, sans-serif'
	//					 color: 'white'
						}
					}
				},
				yAxis: {
					tickInterval: 5,	//自定义刻度
					max: 100,//Y轴最大值
					title: {
						text: '百分數',
		//				tickPixelInterval:10,
						margin: 50
					},
					plotLines: [{
						value: 0,
						width: 1,
						color: '#808080'
					}]
				},
				
				/* legend: {
					layout: 'vertical',
					backgroundColor: '#6E6E6E',
					align: 'right',
					style: {
						left: 'auto',
						right:'5px',
						top: '180px',
						bottom: 'auto'
					}
				}, */
				tooltip: {//鼠标放在图形上时的提示信息
					formatter: function() {
			                return '<b>'+ this.series.name +'</b><br/>'+
							this.x +': '+ this.y;
					}
				}
		};
		
		//下面的代码主要是为了构造形如以下的数据:
		/* [{
				name: 'BF',
				data: [150, 270, 120, 230, 300, 220, 250, 120, 100, 200, 90, 60]
			}, {
				name: 'LF',
				data: [230, 160, 150, 100, 290, 300, 200, 160, 500, 100, 86, 25]
			}, {
				name: 'TJ',
				data: [60, 90, 100, 200, 330, 120, 120, 300, 80, 200, 39, 10]
			}] */
		options.series = [];
		// data它是从数据库中查出来的值的列表, 是一个list
		for(var i=0; i<data.length; i++){
			options.series[i] = { 
                  name: data[i].WEEK,
       //         type: 'column',
                  data: [parseFloat(data[i].RL_30),parseFloat(data[i].RL_60),
                         parseFloat(data[i].RL_120),parseFloat(data[i].RM_120)]
               };

		}
		chart = new Highcharts.Chart(options);
	}
	
	function getDataForHighcharts() {
		var data="";
		// 此处异步请求数据库中的数据，这样可以只刷新报表显示部分
		// data=...........
		showHighCharts(data);
	}

body部分：

<input type="button" value="显示图形" onclick="getDataForHighcharts()">
<div id="container1" align="center" style="height: 470px; margin: 0 0 0 0"></div>

以上代码只写出了主要部分，并不能成功运行起来