您的位置:首页 > 其它

Highcharts报表之柱状图

2012-02-23 15:36 162 查看
导入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>


以上代码只写出了主要部分,并不能成功运行起来
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: