jqplot前端图形报表2
Sincelily 2011-10-25
<%--jqplot插件绘制报表图片--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jqplot插件绘制报表图片样例</title>
<link rel="stylesheet" type="text/css" href="${ctx}/JsLib/jqplot/jquery.jqplot.css"/>
<!--[if lt IE 9]>
<script language="javascript" type="text/javascript" src="${ctx}/JsLib/jqplot/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="${ctx}/JsLib/jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="${ctx}/JsLib/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="${ctx}/JsLib/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="${ctx}/JsLib/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="${ctx}/JsLib/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="${ctx}/JsLib/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var drawPlot = function(getContainer,fetchData,fetchOption){
$.jqplot(getContainer,fetchData,fetchOption);
}
var getContainer = function(sContainerId,height,width){
var oContainer = $('#'+sContainerId);
if(height != null){
oContainer.height(height + 'px');
}
if(width != null){
oContainer.width(width + 'px');
}
return sContainerId;
}
//图表数据需要后台生成
//点线数据
var fetchLineData = function(){
var arrData = [];
var line = [];
line.push([1,2]);
line.push([3,5.12]);
line.push([5,13.1]);
line.push([7,33.6]);
line.push([9,85.9]);
line.push([11,219.9]);
arrData.push(line);
return arrData;
}
//柱状图数据
var fetchBarData = function(){
var arrData = [];
var line = [];
line.push(['one', 70]);
line.push(['二季度', 90]);
arrData.push(line);
return arrData;
}
//图表标题可以后台生成
var fetchOption = function(title,render,xlabel,ylabel,isCategory){
var renderer = null;
var rendererOptions = {};
if(render == 'line'){
renderer = $.jqplot.LineRenderer;
}else if(render == 'bar'){
renderer = $.jqplot.BarRenderer;
rendererOptions = {
barMargin:30,//柱状体之间间隔
barWidth:30
};
}
var oOption = new Object();
//全局数据串设置
oOption.seriesDefaults={
renderer:renderer,//使用何种图形表示
rendererOptions:rendererOptions,//渲染图形的参数
showMarker:true
};
//全局纬度设置
oOption.axesDefaults={
min:1,
autoscale:true
};
//纬度的最小值和最大值,可由后台生成
oOption.axes = {
xaxis:{
label:xlabel
},
yaxis:{
label:ylabel,
//labelOptions: {
// fontFamily: 'Georgia, Serif',
//fontSize: '12pt'
//},
min:2,
max:240
}
};
if(isCategory == true){
oOption.axes.xaxis = {//x轴绘制方式
renderer:$.jqplot.CategoryAxisRenderer
};
oOption.axesDefaults = {
//tickRenderer: $.jqplot.CanvasAxisTickRenderer使用这个时x轴无法显示中文
//tickOptions: {
//angle: -30,
//fontSize: '10pt',
//labelPosition: 'middle'
//}
}
}
//oOption.textColor='#ff0000';
oOption.grid = {
shadow:false,
borderWidth:9.0
};
//图表标题
oOption.title = title;
oOption.highlighter={tooltipFadeSpeed:'slow', tooltipLocation:'n'};
oOption.series = [
{
//color:'#5FAB78',
renderer:renderer
}
];
return oOption;
}
drawPlot(getContainer('chartdiv')
,fetchLineData()
,fetchOption('标题','line','x轴标签','y轴标签')
);
drawPlot(getContainer('chartdiv2')
,fetchBarData()
,fetchOption('标题','bar','x轴标签','y轴标签',true)
);
});
</script>
</head>
<body>
<div id="chartdiv" style="height:400px;width:300px; "></div>
<div id="chartdiv2" style="height:400px;width:300px; "></div>
</body>
</html>
