jqplot前端图形报表2

最新推荐文章于 2024-05-18 11:09:56 发布

ccckkko

最新推荐文章于 2024-05-18 11:09:56 发布

阅读量128

点赞数

分类专栏：报表文章标签：前端 javascript java ViewUI

本文链接：https://blog.csdn.net/ccckkko/article/details/84053141

版权

报表专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<%--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>

<title>jqplot插件绘制报表图片样例</title>

<!--[if lt IE 9]>

<![endif]-->

$(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>

</body>

</html>

ccckkko

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jqplot前端图形报表2

&lt;%--jqplot插件绘制报表图片--%&gt;&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;%@ include file="/common/common.jsp"%&gt; &lt;!D
复制链接

扫一扫