<%--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是一款基于jQuery的数据可视化库，它允许开发者创建各种复杂的图表和图形报表。这款JavaScript库在Web应用中广泛使用，特别是在需要动态数据展示或者交互式图表的场合。本篇文章将详细探讨jqPlot的使用和其...
jqPlot 是一个基于 jQuery 库的图形报表插件，它提供了丰富的图表绘制功能，包括线状图、柱状图和饼状图等。这个插件以其易用性、兼容性和可扩展性而受到欢迎。jqPlot 支持自定义日期轴线、旋转轴文字、自动计算趋势...
jqPlot是一款基于jQuery的图表绘制插件，专用于创建各种美观的统计图形，如线形图、条形图和饼形图。它提供了丰富的自定义选项，使得图表样式多样化，同时还具备Tooltips（提示框）和数据点高亮显示等交互功能。...
报表制作 曲线图 饼图 折线图 jquery.jqplot水晶报表 制作图表，统计，汇总，预测比较实用，结合流行的jquery技术，更是能大大提高工作效率，使用的灵活性高，可以做出动态、时时的效果。
在实际项目中，jqPlot可用于创建各种类型的报表，如销售报表、业绩分析报表、时间序列数据报表等。通过组合不同的图表类型和插件，可以实现复杂的报表结构，如多图表联动、数据钻取等。同时，利用jqPlot的API，可以...
2、可以自定义日期轴线 3、可设置旋转轴文字 4、自动计算趋势线 5、工具条提示和高亮数据点 6、默认最优设置，非常易于使用 柱状图可以提供坐标轴定制，柱条宽度、颜色定制，阴影设置等等。 线状图也称曲线图，是指...
2. **数据格式化**：解释如何组织和格式化数据，以便于 jqPlot 解析和渲染。 3. **图表选项**：讲解如何配置图表的各种选项，如标题、轴标签、网格线、图例等。 4. **绘制图表**：展示如何使用 jqPlot 的 API 来...
用JS作图形报表，有多个插件可选择，其中HighCharts、JqPlot、JsChart是使用比较多的，但HighCharts和JsChart只能用作个人使用、为了以后项目中能使用，很多人选择JqPlot（个人和商业都免费）。俺最近开发项目进要...
**JQPlot：jQuery的图形控件** JQPlot是基于JavaScript库jQuery的一款强大的图表绘制工具，它提供了丰富的图表类型和高度自定义的功能，使得在Web应用中展示数据变得更加直观和美观。JQPlot的核心优势在于其灵活性...
JQuery图形报表插件jqPlot是一款强大的JavaScript库，专门用于创建各种类型的图表，如线图、柱状图、饼图等。它提供了丰富的定制选项，使得开发者能够根据需求设计出美观且功能丰富的图表。以下是对jqPlot的一些主要...
通过深入研究这些示例，开发者可以掌握如何利用 jqPlot 创建吸引人的、功能丰富的数据可视化应用，无论是简单的数据分析还是复杂的交互式报表，jqPlot 都能提供有效的解决方案。对于那些寻求在Web应用中添加高质量...
$.jqplot('chartdiv', [1,2,3,4,5], { // 选项配置 }); }); ``` #### 选项配置 jqPlot 支持丰富的选项配置，包括但不限于： - **数据源**: 图表的数据来源，可以是数组、对象或通过 AJAX 请求获取的数据。 - *...
jqPlot 是一个基于 jQuery 库的图形报表插件，它为网页开发人员提供了一种方便、灵活且可扩展的方式来创建各种图表，如线状图、柱状图和饼状图等。jqPlot 的核心特点包括易用性、浏览器兼容性和可扩展性。它允许...
**jqPlot概述** jqPlot是基于JavaScript...总的来说，jqPlot作为一个强大的前端图表库，能够满足开发人员在Web应用中创建各种复杂图表的需求。其易用性和灵活性使其成为jQuery开发者在数据可视化领域的一个优秀选择。
2. **灵活性**：jqPlot支持多种图表类型，且提供大量的可配置参数，可以定制出独特的图表样式，适应不同的数据可视化需求。 3. **交互性**：jqPlot的图表支持鼠标悬停时显示数据提示、点击事件响应以及图表的动态...
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]); ``` jqPlot提供了丰富的可配置选项（options）来定制图表的外观和行为。以下是一些常用选项的解释： - `seriesColors`：定义...
总的来说，Jqplot是网页数据可视化的强大工具，无论你是数据分析师还是前端开发者，都能从中受益。通过熟练掌握Jqplot，你可以轻松地将复杂的数据转化为生动、直观的图表，提升网页的用户体验。在“jquery.jqplot....
##### 2. `stackSeries` - **定义**: 决定是否堆叠系列数据。 - **类型**: Boolean - **默认值**: false - **示例代码**: ```javascript options = { stackSeries: true, }; ``` - **说明**: 当`stackSeries`设...