zoukankan      html  css  js  c++  java
  • 对 web 生成chart图的解释

    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

  • 相关阅读:
    基于51单片机PWM调速数码管显示测速L298芯片控制直流电机正反运转的项目工程
    基于51单片机通过点击移位按键移位修改LCD1602字符型液晶显示器显示时分秒个位十位数值的计时项目工程
    基于51单片机DS18B20测温LCD1602显示可设时设温调时的项目工程
    基于51单片机定时器0计时外部中断0计数的霍尔传感器精确测速数码管显示测速的项目工程
    基于51单片机定时器0(或定时器1)工作方式2产生周期为1s方波的项目工程
    基于51单片机增加减少键控制PWM(脉冲宽度调制)来调整LED亮灭程度
    PID解释与离散化算法公式
    利用XPT2046芯片转换电位器模拟值为数码管显示数值的项目工程
    Glide生命周期原理
    一文了解 Consistent Hash
  • 原文地址:https://www.cnblogs.com/cy163/p/1597259.html
Copyright © 2011-2022 走看看