<%--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>
分享到：
相关推荐
jqplot图形报表开发所用到的js jqplot图形报表开发所用到的js
jquery 图形报表插件jqplot 简介及参数详解
jqPlot 图形报表插件简介及参数详解(jquery) 前边也讲过一个基于java的图形报表，功能及外观也不错，但存在通用性的问题。所以我们来学一个具有易用性+兼容性+可扩展性的js图表插件。 jqPlot是一款基于jquery类库的...
报表制作 曲线图 饼图 折线图 jquery.jqplot水晶报表 制作图表，统计，汇总，预测比较实用，结合流行的jquery技术，更是能大大提高工作效率，使用的灵活性高，可以做出动态、时时的效果。
jqplot
jqPlot是一个jQuery绘图插件，可以利用它制作漂亮的线形图、条形图、饼形图。jqPlot支持为图表设置各种不同的样式，提供Tooltips，数据点高亮显示等功能柱状图可以提供坐标轴定制、柱条宽度、颜色定制和阴影设置等等...
jqplot报表的实现，内有多种报表的实现，及jqplot的API。
2、可以自定义日期轴线 3、可设置旋转轴文字 4、自动计算趋势线 5、工具条提示和高亮数据点 6、默认最优设置，非常易于使用 柱状图可以提供坐标轴定制，柱条宽度、颜色定制，阴影设置等等。 线状图也称曲线图，是指...
用JS作图形报表，有多个插件可选择，其中HighCharts、JqPlot、JsChart是使用比较多的，但HighCharts和JsChart只能用作个人使用、为了以后项目中能使用，很多人选择JqPlot（个人和商业都免费）。俺最近开发项目进要...
前端项目-jqPlot,jqplot是jquery javascript框架的绘图和图表插件。jqplot生产的线条、条形图和饼图很漂亮，有很多特点。
jqplot官方文档，包含所有的api。 居家旅行必备
官方jqplot chart 例子，非常丰富。应有尽有。。
jqplot饼状统计图，很鲜明很简单的例子。如需其他图形只需改动小部分即可。
功能概述： 有多种图表样式可供选择 可以自定义日期轴线 可设置旋转轴文字 自动计算趋势线 工具条提示和高亮数据点 默认最优设置，非常易于使用 以上功能在jqPlot主页中的示例页面有 很多直观的展示。这里是它详细...
使用jqplot进行图形绘制，该插件为图形标注线，扩展标注线的功能使其能添加注释。
jqplot插件的option对象属性的配置描述
没啥可描述的，就是用jqplot做的例子，无语了，这还有文字限制，一点都不自由。
一个很好的开源JQuery 图形控件，包括源代码和样例程序。