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>

相关推荐