braint8  
日历
<2011年2月>
303112345
6789101112
13141516171819
20212223242526
272812345
6789101112
统计
  • 随笔 - 0
  • 文章 - 15
  • 评论 - 16
  • 引用 - 0

导航

留言簿(2)

文章分类(15)

文章档案(15)

搜索

  •  

积分与排名

  • 积分 - 17455
  • 排名 - 1882

最新评论

 

一、下载 open-flash-chart 包,需要用的有根目录下: open-flash-chart.swf js 目录下: swfobject.js

二、jofc2 针对 java 后台开发生成图形的包

三、Jsp 页面引用

var url= "testOFC.do?op=bar" ; // 多参数合在一起了 . & 换为 %26.         

swfobject.embedSWF( "open-flash-chart.swf" , "aaa" , "500" , "350" , "10.0.0" , "expressInstall.swf" , { "data-file" :url } , { wmode: "transparent" } );

url 可以实现调用 action ,返回 json 数据,通过 response 返回

{ "data-file" :url } 数据正确后,自动加载图形

把此 javascript 的方法通过 onload= 加载出来

四、各种图形的生成

饼图:

PieChart pie = new PieChart();

pie.setFontSize(15);// 设置字体

pie.addSlice(1000, " 苹果 " );// 分类

pie.addSlice(3000, " 橙子 " );

pie.addSlice(2000, " 香蕉 " );

pie.addSlice(500, " 西瓜 " );

pie.addSlice(1500, " 蜜桃 " );

 

pie.setStartAngle(100);// 设置角度

pie.setAnimate( true );

// 设置颜色

pie.setColours( new String[] { "0x336699" , "0x88AACC" , "0x999933" ,

                  "0x666699" , "0xCC9933" , "0x006666" , "0x3399FF" , "0x993300" ,

                  "0xAAAA77" , "0x666666" , "0xFFCC66" , "0x6699CC" , "0x663366" ,

                  "0x9999CC" , "0xAAAAAA" , "0x669999" , "0xBBBB55" , "0xCC6600" ,

                  "0x9999FF" , "0x0066CC" , "0x99CCCC" , "0x999999" , "0xFFCC00" ,

                  "0x009999" , "0x99CC33" , "0xFF9900" , "0x999966" , "0x66CCCC" ,

                  "0x339966" , "0xCCCC33" });

pie.setTooltip( "#val#  /  #total#<br> 占百分之 #percen t#");// 鼠标移动上去后提示内容

pie.setRadius(20);

Chart flashChart = new Chart( " 库存量 " , "font-size:0px;color:#ff0000;" ); // 整个图的标题  

flashChart.addElements(pie); // 把饼图加入到图表   

json = flashChart.toString();// 转成 json 格式

 

      

response.setContentType( "application/json-rpc;charset=utf-8" );

response.setHeader( "Cache-Control" , "no-cache" );

response.setHeader( "Expires" , "0" );

response.setHeader( "Pragma" , "No-cache" );    

response.getWriter().print(json);// 写到客户端

 

    条状码 :

    BarChart chart = new BarChart(BarChart.Style. GLASS ); // 设置条状图样式

           //FilledBarChart chart = new FilledBarChart("red","blue");// 设置条状图样式

           String sMax = "10000" ;

           long max = 1000; // //Y 轴最大值

 

           Map<String,Long> map = new HashMap<String,Long>();

           map.put( " 一月份 " , new Long(1000));

           map.put( " 二月份 " , new Long(2000));

           map.put( " 三月份 " , new Long(5000));

           map.put( " 四月份 " , new Long(7000));

           map.put( " 五月份 " , new Long(500));

          

           XAxis x = new XAxis(); // X

          

           for (String key:map.keySet()){

              x.addLabels(key); // x 轴的文字

              Bar bar = new Bar(map.get(key), " " );

             

              bar.setColour( "0x336699" ); // 颜色

              bar.setTooltip(1000 + " " ); // 鼠标移动上去后的提示

              chart.addBars(bar); // 条标题,显示在 x 轴上

           }

 

           Chart flashChart = new Chart();          

           flashChart.addElements(chart); // 把柱图加入到图表       

           YAxis y = new YAxis();  //y   

           y.setMax(max+10.0); //y 轴最大值   

           y.setSteps(max/10*1.0); // 步进   

           flashChart.setYAxis(y);  

           flashChart.setXAxis(x);  

           json = flashChart.toString();

 

常见问题:

按格式写好了,却一直提示 swfobject 未定义,是 swfobject.js 文件的问题,官方的 1.9.7 版本的 swf 64K ,且 js 也有问题,建议使用高版本的。本来自己公司另一个项目是可以用,我按一样的格式写过来,用自己下的包却一直出不来,后来把包换成了另外一个项目的 swf js 就一切正常了,如果一直出不来,多数是 js swf 文件的问题,请使用2.x的包, jofc2 里的包一般没问题。


完全是本人遇到的问题,如果有写错的地方,欢迎指出!另外jofc2里的doc没注释,连英文注释都没,想查看其他图形的使用的时候,看文档晕了。。。。。

暂时只用了饼图和柱状图,多数都是看网上的资料自己试验的,其他图形还要研究,感觉如果有份详细的文档,对于自己写其他图形应该会快很多


想看效果的,到open-flash-chart主页,比较起来比jfreechart效果好

http://teethgrinder.co.uk/open-flash-chart/


期间还看了一点fusionchart的,发现效果更牛B,可惜的是只有收费版的效果很眩,free版效果还不如open-flash-chart,但是相比较fusionchart的资料更多而且看起来也更简单。

posted on 2009-11-12 19:46 情晚风 阅读(6363) 评论(10)  编辑  收藏 所属分类: Chart统计展示图形
评论:
  • # re: Open-flash-chart的使用  堂堂 Posted @ 2009-12-31 11:41
    您好,我也是刚开始学习 jofc 但是饼图总是不出结果,其他的图都出了结果,希望你能够给我发个邮件,把使用的 open-flash-chart.swf和 swfobject.js文件发给我,不胜感激。 邮箱 hitgwt@163.com  回复  更多评论   

  • # re: Open-flash-chart的使用  情晚风 Posted @ 2010-01-04 10:51
    @堂堂
    邮件已发送,个人推荐不要用jofc文档说明太少了,推荐用fusionchart文档详细而且有具体的例子说明,网上资料也多。  回复  更多评论   

  • # re: Open-flash-chart的使用  njm Posted @ 2010-05-18 16:14
    我的也是饼图 出不来,但是想学习一下,能不能将open-flash-chart.swf和 swfobject.js文件也发给我一份。谢谢。njm168@gmail.com  回复  更多评论   

  • # re: Open-flash-chart的使用  njm Posted @ 2010-05-18 16:14




    我的也是饼图 出不来,但是想学习一下,能不能将open-flash-chart.swf和 swfobject.js文件也发给我一份。谢谢。njm168@gmail.com





      回复  更多评论   

  • # re: Open-flash-chart的使用  行我意 Posted @ 2010-06-02 16:52
    你好,我试了下总是出现错误。
    Open Flash Chart
    IO ERROR
    Loading test data
    Error #2032

    可以把你的源代码发份给我,谢谢了。邮箱:xyanling0529@126.com  回复  更多评论   

  • # re: Open-flash-chart的使用[未登录]  情晚风 Posted @ 2010-06-29 18:15
    @行我意
    直接用fusionchart吧,ofc不建议用了  回复  更多评论   

  • # re: Open-flash-chart的使用  小雅 Posted @ 2010-09-17 13:55
    你好,我用open flash chart 的时候报这个错误
    Open Flash Chart
    IO ERROR
    Loading test data
    Error #2032

    我的程序体是:
    DataSet ds = DataProvider.Instance().GetRecordDataSet(SearchTerms);
    string[] labels = new string[ds.Tables[0].Rows.Count];
    OpenFlashChart.OpenFlashChart chat = new OpenFlashChart.OpenFlashChart();
    OpenFlashChart.OpenFlashChart chat1 = new OpenFlashChart.OpenFlashChart();
    int max = 0;
    ArrayList tu = new ArrayList();
    //List<string> Colors = new List<string>();
    List<string> list = new List<string>();
    for (int x = 0; x < ds.Tables[0].Rows.Count; x++)
    {

    labels[x] = ds.Tables[0].Rows[x]["types"].ToString();
    int careerCount = 0;
    if (!Convert.IsDBNull(ds.Tables[0].Rows[x]["num"]))
    careerCount = Convert.ToInt32(ds.Tables[0].Rows[x]["num"]);
    if (careerCount > max)
    {
    max = careerCount;
    }
    tu.Add(careerCount);//纵坐标的值
    list.Add(labels[x]);//横坐标的值

    }

    OpenFlashChart.Pie pie1 = new OpenFlashChart.Pie(); //饼图
    OpenFlashChart.Bar3D bar3d1 = new OpenFlashChart.Bar3D();//三维图
    pie1.Values = tu;//给饼付值
    bar3d1.Values = tu;//给三维图形付值
    pie1.Colour = "#2156B7";
    pie1.Tooltip = "线路条数:#val#人";
    bar3d1.Colour = "#2156A7";
    bar3d1.Tooltip = "线路条数:#val#人";
    chat.AddElement(pie1);
    chat1.AddElement(bar3d1);

    chat1.X_Axis.Steps = 8;
    chat1.X_Axis.Labels.Steps = 8;
    chat1.X_Axis.SetLabels(labels);
    chat1.X_Axis.Labels.Vertical = true;

    chat1.X_Axis.Set3D(12);

    chat1.Y_Axis.Set3D(6);
    chat1.Y_Axis.Steps = 40;

    NewMethod(list, chat, Mark, max);//方法2
    NewMethod(list, chat1, Mark, max);

    OpenFlashChartControl1.EnableCache = false;
    OpenFlashChartControl1.Chart = chat;

    OpenFlashChartControl2.EnableCache = false;
    OpenFlashChartControl2.Chart = chat1;

    请问是哪里报错?  回复  更多评论   

  • # re: Open-flash-chart的使用  小雅 Posted @ 2010-09-17 13:56
    能否加我 的Q进行进一步的交流:32922799

    谢谢!  回复  更多评论   

  • # re: Open-flash-chart的使用  张鑫涛 Posted @ 2010-12-03 16:26
    open-flash-chart.swf 这个文件必须放到根目录下面吗我放到别的地方就不行了。。路径没问题的我用的是绝对路径。。。。  回复  更多评论   

  • # re: Open-flash-chart的使用  小峰 Posted @ 2011-02-12 16:26
    为什么我的老是报错。自己编译了下中文旋转!
    Open Flash Chart
    IO ERROR
    Loading test data
    Error #2032
    我的主程序是:
    <tr>


    <%
    String base = "";
    int width = 1100;
    int height = 300;
    String dataurl = request.getRequestURL().toString();
    //String a="/timedata.jsp?act="+year;

    //String url = dataurl.replace("/timeReport.jsp", a);
    String url = java.net.URLEncoder.encode(dataurl.replace("/typeReport.jsp","/typedata.jsp"), "UTF-8");
    //out.println("<script language=\"javaScript\">alert('"+dataurl+"');</script>");
    String obj_id = "chart";

    %>
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    codebase="<%= request.getProtocol() %>://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
    width="<%=width %>" height="<%=height %>" id="ie_<%=obj_id %>" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="open-flash-chart1.swf?width=<%=width%>&height=<%=height%>&data=<%=url%>" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#FFFFFF" />
    <embed src="<%=base%>open-flash-chart1.swf?data=<%=url%>"
    quality="high" bgcolor="#FFFFFF"
    width="<%=width%>" height="<%=height%>" name="<%=obj_id%>" align="middle" allowScriptAccess="sameDomain"
    type="application/x-shockwave-flash"
    pluginspage="<%=request.getProtocol()%>://www.macromedia.com/go/getflashplayer"
    id="<%=obj_id%>"
    />
    </object>

    </tr>



    数据来源JSP:
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

    <%@page import="openflash.Graph"%>
    <%@page import="com.core.tools.StrTools"%>
    <%@page import="java.sql.Statement"%>
    <%@page import="java.sql.ResultSet"%>
    <%@page import="java.net.URLEncoder"%>
    <%@page import="com.jdgm.gmhs.dbService.SCodetableResService"%>
    <%@page import="com.jdgm.gmhs.dbService.SCodetableRes"%>
    <%@page import="javax.wsdl.Output"%>

    <%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
    + request.getServerName() + ":" + request.getServerPort()
    + path + "/";
    response.setCharacterEncoding("UTF-8");
    %>
    <%@ page import="com.core.db.DbHandlerWithSharePool"%>
    <%@ page import="com.core.tools.*"%>
    <%@ page import="java.sql.*" %>
    <%
    DbHandlerWithSharePool dbUtils = new DbHandlerWithSharePool();
    if(dbUtils.open() == false){
    out.print(Tools.showMsg("页面处理错误!"));
    return;
    }
    Connection conUtils = dbUtils.getConn();
    try{
    %>
    <body>
    <%
    // String act = StrTools.transNull(request.getParameter("act"));
    // if("".equals(act)||null==act){
    // act="2011";
    // }

    int max = 50;

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

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



    Statement st = conUtils.createStatement();




    SCodetableResService sCodeResService = new SCodetableResService();
    SCodetableRes sCodeRes = null;
    String name = "";
    ArrayList listEventType = sCodeResService.getArrayBySql(conUtils, "select * from s_codetable_res where state='1' and table_type=(select id from s_codetable_type where code='EVENTTYPE') order by seq asc");
    for(int i=0; i<listEventType.size(); i++){
    sCodeRes = (SCodetableRes)listEventType.get(i);
    name = sCodeRes.getName();
    labels.add(name);

    String tmpsql1="select count(*) num,sum(t.patienttotal) patienttotal,sum(t.deadtotal) deadtotal from ws_event t where t.eventtype='"+sCodeRes.getId()+"'";
    ResultSet rs = st.executeQuery(tmpsql1);
    rs.next();
    data.add(rs.getString("num"));

    links.add("javascript:alert('"+name+"')");

    }

    //创建图形对象

    Graph g = new Graph();

    //设置标题

    g.title("年度卫生事件类别分布表", "{font-size: 25px;}");

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

    g.set_data(data);

    //g.set_data(data2);

    //g.set_data(data3);

    //设置图例

    g.bar("100", "0x9933CC", "TOTAL",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





    //设置X轴属性

    g.set_x_labels(labels);

    g.set_x_label_style("12", "#FF0000", 2, 1, "");
    g.set_x_legend("月份", 12, "#736AFF");


    // set the Y max

    //设置y轴属性

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

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

    g.y_label_steps(10);//设置步长
    g.set_y_legend("total", 12, "#736AFF");
    %>

    <%=g.render()%>//输出图形
    <%
    }catch (Exception e) {
    e.printStackTrace();
    }finally{
    dbUtils.close();
    }
    %>  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 
 
Copyright © 情晚风 Powered by: 博客园 模板提供:沪江博客