现在的位置: 首页 > 综合 > 正文

对 web 生成chart图的解释

2012年02月11日 ⁄ 综合 ⁄ 共 4609字 ⁄ 字号 评论关闭

http://hi.baidu.com/lipiji1986/blog/item/b627a0347901d682a71e127a.html

目前java web 开发做统计图主要有2种方式:
                :服务器端生成图片传递给客户端;
                :客户端调浏览器组件,生成图片;

        第一种情况主要有:JFreeChart Birt 和其他收费的FX等等
                    JFreeChart :开源java图表库,让开发者能够很容易在程序里面显示高质量的图表。支持很多种图形文件格式: JPEG, GIF, PDF, EPS and SVG.
                      这对于java开发者是一个很好的资源。只是他的文档收费;  
                    Birt:Eclipse推出了的自己的报表框架。它本来是eclipse的一个插件,实现在eclipse下图形化操作, 当然可以抽出它的jar包自己写代码生成图片。

        第二中情况主要有:AmCharts Flot Open Flash Chart PlotKit
                  AmCharts :AmCharts 是一个动画交互Flash图表;
                  Flot:Flot 为 jQuery提供的javascript代码库. 容易使用,有特色的图表,提供交互功能(能够放大缩小数据区域等);
             Open Flash Chart:Open Flash Chart 是一个 Flash 图表组件,提供了java api 接口;
                  PlotKit:PlotKit 是一个 图表和图像的Javascript 库. PlotKit 和 MochiKitjavascript 库一起工作,

                    支持HTML Canvas 和 Adobe SVG 显示 以及本地浏览器支持。尤其文档非常全

Open Flash chart (Bayon Technologies Company)

            OpenFlashChart是一个开源的报表制作组件,该组件能够自动生成一个好看的、动态的flash报表;
该组件使用flash展示报表能够很好的做到与浏览器进行集成,目前浏览器基本都能很好的支持flash;

该组件还支持一些简单的JavaScript,
提供在图形上对外部URL的链接;该组件非常小,java类一共不超过10个,可操作的API也很少,这样学习起来也非常容易上手。
但可阅读的文档非常少,在与其它框架集成方面还有些问题。

1.1.1 open flash chart home : http://teethgrinder.co.uk/open-flash-chart/
API详细见下面附件1.jpg, 2.jpg, 3.jpg, 4.jpg

 

1.1.2 主要配置项 (工程打包在附件里面)

           openflashchart.jar:Open Flash Chart组件,工程开始时引入(lib目录下)。

         open-flash-chart.swf:Flash文件接口,通过该文件来生成Flash文件,备页面调用(在web目录下,与WEB-INF目录并级)。

         swfobject.js:Flash文件依赖的JS文件(在web目录下,与WEB-INF目录并级)。

1.1.3       Open Flash Chart主要有:HTML、JSP、Servlet等三种使用方式。分别介绍如下:
1.1.3.1     HTML方式
数据文件data.txt
//设置图形标题、颜色

&title=AAA,{font-size:30px; color:#000000}&

//设置饼图的属性

&pie=60,#9933CC,{display: n-one; font-size:16px; color: #ff0000;},false,3&

&values=0,2,0,2,6&

//设置各块图形的颜色

&X colours=#d01f3c,#356aa0,#C79810,#73880A,#D15600,#6BBA70&

&colours=#d01f3c,#356aa0,#C79810&

//设置各块图形的onclick链接

&links=javascript:alert('9'),javascript:alert('6'),javascript:alert('7'),javascript:alert('9'),javascript:alert('5'),javascript:alert('7'),javascript:alert('6'),javascript:alert('9'),javascript:alert('9')&

//设置饼图各块的标签

&pie_labels=zero,two,zero,two (2),six&

//设置各块图形单位

&tool_tip=Value: #val#%&

显示文件 chart.html

 

<object>

...

<param name="movie" value="open-flash-chart.swf?width=500&height=250&data=data.txt" />

//设置flash的大小和数据的来源(来源于data.txt文件)

<embed src="open-flash-chart.swf?data=data.txt" quality="high"

           bgcolor="#FFFFFF" width="500" height="250"

           name="chart" align="middle" allowScriptAccess="always"

           type="application/x-shockwave-flash"

           pluginspage="http://www.macromedia.com/go/getflashplayer"

           id="chart" />

...

</object>

<object></object>标签 object 标签讲解:http://www.blabla.cn/html_tag_ref/object.html

embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等 html5.0以上版本支持

1.1.3.2      JSP形式

数据文件:

<body>

<%

    int max = 50;

    List<String> data = new ArrayList<String>();

    List<String> links = new ArrayList<String>();

    for(int i = 0; i < 12; i++) {

       data.add(Double.toString(Math.random() * max));

       links.add("javascript:alert('hi’)");

    }

//创建图形对象

    Graph g = new Graph();

//设置标题

    g.title("统计图-来自JSP", "{font-size: 25px;}");

//将数据对象添加到图形对象上

    g.set_data(data);

    //g.set_data(data2);

    //g.set_data(data3);

//设置图例

    g.line(2, "0x9933CC", "Page views", 10, 2);

    //g.line_hollow("2", "4", "0x80a033", "Bounces", "10");

    //g.line_dot("5", "5", "0x006699");

//将链接对象添加到图形对象上

    g.set_links(links);

//设置X轴座标

    // label each point with its value

    List<String> labels = new ArrayList<String>();

    labels.add("一月");labels.add("二月");labels.add("三月");labels.add("四月");labels.add("五月");

    labels.add("六月");labels.add("七月");labels.add("八月");labels.add("九月");labels.add("十月");

    labels.add("十一月");labels.add("十二月");

//设置X轴属性

    g.set_x_labels(labels);

    g.set_x_label_style("12", "#FF0000", 0, 2, ""); g.set_x_legend("Open Flash Chart Demo", 12, "#736AFF");

   

    // set the Y max

//设置y轴属性

    g.set_y_max(60);//设置最大长度

    // label every 20 (0,20,40,60)

    g.y_label_steps(6);//设置步长

%>

<%=g.render()%>//输出图形

</body>

显示文件:

<param name="movie"

           value="<%=url%>/openflashchart/open-flash-chart.swf?width=500&height=250&data=<%=url%>/openflashchart/jsp/chart-data-line.jsp" />

<embed src="<%=url%>/openflashchart/open-flash-chart.swf?data=<%=url%>/openflashchart/jsp/chart-data-line.jsp" quality="high"

           bgcolor="#FFFFFF" width="<%=width%>" height="<%=height%>"

           name="chart" align="middle" allowScriptAccess="always"

           type="application/x-shockwave-flash"

           pluginspage="http://www.macromedia.com/go/getflashplayer"

           id="chart" />

1.1.3.3 servlet方式
数据java类:

response.setCharacterEncoding("utf-8");//设置字符集,在项目中使用utf-8页面不会出现乱码

response.getWriter().write(g.render());//输出图形

显示文件和jsp显示一样,就是请求的数据文件变成了servlet

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/kituq520/archive/2008/12/05/3450138.aspx

抱歉!评论已关闭.