Jqplotで作った簡易柱状図
4437 ワード
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>