JavaScript图表库 PlotKit使用手记

红薯 发布于 2009/12/24 21:24
阅读 1K+
收藏 1

plotkit,一个基于MochiKit的轻量级的Javascript图形库,我们如果想在客户端让浏览器实时绘制图形的话可以使用这个库,当 然除了这个库之外你还有许多其他的选择,另外还有一些图形库也是基于plotkit的,如plotr
下面简要介绍以下plotkit
Plotkit 基于BSD License,可以在商业软件中放心使用,它支持HTML Canvas 和SVG,一些浏览器本身内置了Canvas如FireFox和opera以及Mozilla,同时这些浏览器对SVG也支持得比较好,可惜的是占据了市 场大部分份额的浏览器InternetExplorer竟然不支持,不过可喜的是,在IE中我们可以通过google开发的一个脚本来模拟一个画布,当然 模拟出来的性能肯定比不上浏览器内置的画布。
plotkit有三个基本类型
Base     公用功能主要被其他类型引用
LayOut   Layout引擎,支持bar,pie,line等图形
Renderer 输出效果由它决定
目前已经实现的Render有
CanvasRenderer  这种方式使用Html Canvas进行渲染
SVGRenderer      使用SVG来渲染
SweetCanvasRenderer  基于CanvasRenderer,可以自定义,获得更好的外观
SweetSVGRenderer    基于SVGRender,可以自定义
plotkit 的使用示例
1.由于plotkit是基于MochiKit的,所以使用时需要MochiKit包的支持,MochiKit包可以到 MochiKit到官方网站下载
下载完后解压到Web服务器目录下,我使用的是Tomcat,所以解压到tomcat\webapps \myapp\目录下,解压后得到几个目录,不管

2.下载plotkit包,同样解压到tomcat\webapps\myapp\目录下
3.在myapp下建立一个html文件,内容如 下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <script src="mochikit/MochiKit/MochiKit.js" type="text/javascript"></script>
   <script src="plotkit/PlotKit/excanvas.js" type="text/javascript"></script>
   <script src="plotkit/PlotKit/Base.js" type="text/javascript"></script>
   <script src="plotkit/PlotKit/Layout.js" type="text/javascript"></script>
   <script src="plotkit/PlotKit/Canvas.js" type="text/javascript"></script>
   <script src="plotkit/PlotKit/SweetCanvas.js" type="text/javascript"></script>  
</head>
<body>
    <div id="body">
    <h2>Quickstart Demo</h2> 
    <div style="margin: 0 auto 0 auto; width: 500px;">
    <div><canvas id="chart" width="500" height="300"></canvas></div>
    <br/>
    <table id="values" class="data">
        <thead>
            <tr><td>x</td><td>y1</td><td>y2</td></tr>
        </thead>
        <tbody>
            <tr><td>0</td><td>0</td><td>3</td></tr>
            <tr><td>1</td><td>10</td><td>20</td></tr>
            <tr><td>2</td><td>5</td><td>10</td></tr>
            <tr><td>3</td><td>6</td><td>7</td></tr>
            <tr><td>4</td><td>7</td><td>8</td></tr>
            <tr><td>5</td><td>6</td><td>7</td></tr>
            <tr><td>6</td><td>7</td><td>8</td></tr>           
        </tbody>
    </table> 
    <script type="text/javascript">
        var layout = new Layout("line");
        layout.addDatasetFromTable("dataset2", $("values"), xcol = 0, ycol = 2);       
        layout.addDatasetFromTable("dataset1", $("values"), xcol = 0, ycol = 1);
        layout.evaluate();      
        var chart = new SweetCanvasRenderer($("chart"), layout);
        chart.render();
    </script>
    </div>
</div>
</body></html>

使用ie 、firefox 、 opera打开都可以看到效果

加载中
返回顶部
顶部