Jqplot应该说也是属于基于JQuery制作的一个插件,或者说是类库.运用Jqplot能达到不错的效果,感觉和JFreeChart差不多,不过各有所长吧,以下是页面代码,全都写一个JSP里了:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="javax.servlet.*, javax.servlet.jsp.*;" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!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>Horizontal Bar with Vertical lines Test</title>
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/jqplot/jquery.jqplot.css" />
<!-- BEGIN: load jquery -->
<script language="javascript" type="text/javascript"
src="${pageContext.request.contextPath}/jquery-1.3.2.min.js"></script>
<!-- END: load jquery -->
<!-- BEGIN: load jqplot -->
<script language="javascript" type="text/javascript"
src="${pageContext.request.contextPath}/jqplot/excanvas.js"></script>
<script language="javascript" type="text/javascript"
src="${pageContext.request.contextPath}/jqplot/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript"
src="${pageContext.request.contextPath}/jqplot/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript"
src="${pageContext.request.contextPath}/jqplot/jqplot.categoryAxisRenderer.js"></script>
<!-- END: load jqplot -->
<script language="javascript" type="text/javascript">
function drawHistogram(type, arrayKey, arrayValue) {
$.jqplot.config.enablePlugins = true;
line = arrayValue;
plot = $.jqplot('chart', [ line ], {
title : type,
series : [ {
renderer : $.jqplot.BarRenderer,
color : 'blue',
rendererOptions : {
barDirection : 'horizontal',
//the interval of two bars
barMargin : 15,
//the width of each bar
barWidth : 22
}
} ],
axes : {
xaxis : {
min : 0,
max : 5,
tickInterval : '1',
renderer : $.jqplot.LinearAxisRenderer
},
yaxis : {
renderer : $.jqplot.CategoryAxisRenderer,
ticks : arrayKey
}
}
});
}
$(function() {
$("#chart").empty();
var url = "testAction.action";
var type = $("#type").val();
var param = {
type : type
};
$.post(url, param, function(data) {
var json = eval("(" + data + ")")[0];
var index = 0;
//the values on the Y axis to display
var arrayKey = new Array();
//the values compared to the scale on x axis to display
var arrayValue = new Array();
$.each(json, function(key, value) {
arrayKey[index] = key;
arrayValue[index] = [ value, index + 1 ];
index++;
});
//the width of the div #chart
var chartWidth = 500;
//the height of the div #chart,37 is calculated by barMargin+barWidth
var chartHeight = (index + 1) * 37 + 15;
var chart = {
width : chartWidth + 'px',
height : chartHeight + 'px'
};
$("#chart").css(chart);
drawHistogram(type, arrayKey, arrayValue);
$("#chart").css("left",
($(window).width() - $("#chart").width()) / 2);
$("#chart").css("top",
($(window).height() - $("#chart").height()) / 2);
}, 'json');
});
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
分享到:
相关推荐
jqplot柱状图示例,加鼠标移动,示例+JS
一个通过jqplot完整的生成折线图和柱状图例子
jqplot 柱状图源代码、饼形图源代码、折线图源代码
柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图 柱状图
简单jQplot创建引擎(支持线图/饼图/柱状图) http://blog.csdn.net/wtderek/article/details/22885939
使用three.js绘制3d图表(柱状图,饼状图,环状图,面积图等).zip使用three.js绘制3d图表(柱状图,饼状图,环状图,面积图等).zip使用three.js绘制3d图表(柱状图,饼状图,环状图,面积图等).zip使用three.js...
用Labview做柱状图,可以做数据分析用
用Labview做柱状图,可以做数据分析用
css柱状图3Dechars图,css柱状图3Dechars图,css柱状图3Dechars图,css柱状图3Dechars图,css柱状图3Dechars图,css柱状图3Dechars图,css柱状图3Dechars图,css柱状图3Dechars图,css柱状图3Dechars图,css柱状图3...
这个是我特地开发的一个用JFreeChart开发的用来画图的项目,已经开发成形了各种项目的各种需求的项目,并且自己可以拓展,根据需求修改代码,完成项目的需要。 可以直接下载解压后,import到myeclipse里面,运行: ...
主要介绍了使用jQuery jqPlot插件绘制柱状图,需要的朋友可以参考下
matlab编程,生成渐变色的柱状图,可增强文章的可读性
PB做的柱状图, 功能不是很完整
用Delphi实现柱状图,是一个数据分析图表例子代码
WPF 柱状图 堆积柱状图 Chart使用,VS2010版 C# WPF Chart组件实现柱状图,线形图,等统计图表
效果图 https://mp.csdn.net/mp_blog/creation/editor/125918054 用echarts实现立体-柱状图ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10...
如何生成一个php柱状图代码,php柱状图的生成一直是一个比较头痛的问题,现在我终于找到如何生成一个柱状图的方法希望供大家参看
echart 的一个自定义柱状图的demo,之前作为帮别人写的一个测试用小组件 。
VB窗体显示柱状图,调用数据库表单数据,在窗体上显示柱状图
vml实现柱状图vml实现柱状图vml实现柱状图vml实现柱状图vml实现柱状图vml实现柱状图