2007年3月6日星期二

用JavaScript 生成统计图表（Chart）

程序开发中经常需要对已有的业务数据进行分析，并以各种报表和图表的方式显示，比如柱状图、曲线图、饼状图等。作为一个Java开发人员，经常使用的开源 图表工具莫过于JFreeChart了。但是Java的特点是需要编译后运行的，那么有没有什么办法通过脚本来实现图表呢？答案是JavaScript+ plotkit。PlotKit是一个开源的JavaScript图表库，使用他还需要mochikit的支持。下面我给出一个使用的例子：然后在此基础之上说明每一步的作用，你会发现PoltKit的使用非常简单。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> testchart </TITLE>

<script type="text/javascript" src="mochikit/MochiKit.js"></script>

<script type="text/javascript" src="plotkit/Base.js"></script>

<script type="text/javascript" src="plotkit/Layout.js"></script>

<script type="text/javascript" src="plotkit/Canvas.js"></script>

<script type="text/javascript" src="plotkit/SweetCanvas.js"></script>

<script type="text/javascript" src="plotkit/excanvas.js"></script>



以上部分声明了需要使用的js脚本库。记住文件路径一定要正确。

<SCRIPT LANGUAGE="JavaScript">

<!--


//-->

</SCRIPT>

</HEAD>


<BODY>

<SCRIPT LANGUAGE="JavaScript">

<!--

var options = {

"IECanvasHTC": "/plotkit/iecanvas.htc",

"colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),

"padding": {left: 0, right: 0, top: 10, bottom: 30},

"xTicks": [{v:0, label:"zero"},

{v:1, label:"one"},

{v:2, label:"two"},

{v:3, label:"three"},

{v:4, label:"four"}],

"drawYAxis": false

};



上面的部分是对页面中生成的barChart的装饰选项。


function drawGraph() {

var layout = new PlotKit.Layout("bar", options);


//声明一个层，说明我们要使用的装饰选项是上面已经定义的option.并且要生成的图表是“bar”柱状图

layout.addDataset("sqrt", [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);


//然后声明我们这个图表中包含的数据集合

layout.evaluate();


//计算数据

var canvas = MochiKit.DOM.getElement("graph");

var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, options);

plotter.render();


//生成图表

}

MochiKit.DOM.addLoadEvent(drawGraph);


//在页面加载时显示图表

//-->

</SCRIPT>





<div><canvas id="graph" height="300" width="300"></canvas></div>



上面的语句声明了一个层用于存放图表

</BODY>

</HTML>

最终生成的图片如下：

发帖者 时间：
标签：

没有评论:

发表评论

订阅： 博文评论 (Atom)