Fusionchart

最新推荐文章于 2024-02-12 16:13:30 发布
最新推荐文章于 2024-02-12 16:13:30 发布
阅读量813 收藏
点赞数
分类专栏： Javascript 文章标签： 报表 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoxiongaman/article/details/44424683
版权

步骤：

一、确定数据源

二、确定统计图的形状（折线、柱状图、饼图）

三、定x轴和y轴的值

 

fusionChart   

1、3D柱状图

例1：Y轴是数据量，x轴是年度,数据柱状分俩种形式显示。


上图源代码如下：

<!--历年到部来信来访数量-->

<%@pageimport="com.fsm.datetime.DateTime"%>

<%@pagecontentType="text/html;charset=GBK"%>

<%@pageimport="java.util.*,com.fsm.db.*"%>

<%  

        DBService dbservice = new DBService();

        DateTime  datetime = new DateTime();

StringstrYear = datetime.getYear();

intiStartYear = 2008;

DBMap  dbmap1 = new DBMap();

DBMap  dbmap2 = new DBMap();

DBSetdbset1 = null;

DBSetdbset2 = null;

StringstrSQL1="select sum(colvalue2) sumTID,recorddateyear TYear fromc_chart2  where  recorddateyear between'"+iStartYear+"' and '"+strYear+"' group by recorddateyearorder by recorddateyear asc";

StringstrSQL2="select sum(colvalue3) sumTID,recorddateyear TYear fromc_chart2  where  recorddateyear between'"+iStartYear+"' and '"+strYear+"' group by recorddateyearorder by recorddateyear asc";

dbset1 =dbservice.getSelectSet(strSQL1);

dbset2 =dbservice.getSelectSet(strSQL2);

for(inti=0;i<dbset1.size();i++){ 

StringstrTID=dbset1.getValue(i,"TYear");

StringstrTValue=dbset1.getValue(i,"sumTID");

dbmap1.put(strTID,strTValue);         

        }

for(inti=0;i<dbset2.size();i++){ 

StringstrTID=dbset2.getValue(i,"TYear");

StringstrTValue=dbset2.getValue(i,"sumTID");

dbmap2.put(strTID,strTValue);         

        }

//开始设置数据xml格式,用stringBuffer 类型来定义

        StringBuffer strDataXML  = new StringBuffer();

//设置标题 、子标题、x轴y轴名称等属性……

       strDataXML.append("<chart caption='历年信访量' xAxisName='年度 ' yAxisName='信访量' showValues='1' numberPrefix='' useRoundEdges='1' baseFontSize='14'FormatNumberScale='0'>");//XML开始

        //定义x轴的值，以若干年度进行统计

       strDataXML.append("<categories>");

        for(inti=iStartYear;i<=Integer.parseInt(datetime.getYear());i++)

        {

strDataXML.append("<category label='"+i+"年' />");           

        }

       strDataXML.append("</categories>");

       

      

//定义部分y轴的名称：来信的xml数据格式

strDataXML.append("<dataset seriesName='来信'>");

        for(inti=iStartYear;i<=Integer.parseInt(datetime.getYear());i++){ 

StringstrI=Integer.toString(i);

strDataXML.append("<setvalue='"+dbmap2.getValue(strI)+"'link='c_chart1_3.jsp?strYear="+strYear+"' />");         

        }

       strDataXML.append("</dataset>");

         //定义部分y轴的名称：来访的xml数据格式

       strDataXML.append("<dataset seriesName='来访'>");

        for(inti=iStartYear;i<=Integer.parseInt(datetime.getYear());i++){ 

StringstrI=Integer.toString(i);

  strDataXML.append("<setvalue='"+dbmap1.getValue(strI)+"'link='c_chart1_2.jsp?strYear="+strI+"' />");

     

        }

       strDataXML.append("</dataset>");

       strDataXML.append("</chart>");//XML结束

        String strXML =strDataXML.toString();//将stringBuffer转换成String类型

%>

//前台显示（格式、样式、引入的文件等）

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=gb2312">

//引入FusionCharts.js

    <script language="JavaScript"src="../Charts/js/FusionCharts.js"></script>

</head>

<bodystyle="overflow-y:hidden">

<tablealign=center cellspacing="1" cellpadding="1"class=tabletitle>

    <tr>

<tdvalign=top align=center>

//使用DIV来布局

<divid="chartdiv" align="center"></div>

    <scripttype="text/javascript">

//定义FusionChart对象

   var chart = newFusionCharts("../Charts/ScrollStackedColumn2D.swf","ChartId", "800", "600", "0","0");//前台显示统计图的大小设定

  chart.setDataXML("<%=strXML%>");          

   chart.render("chartdiv");

</script>

</td>

</tr>

</table>

 

</body>

</html>

 

2、2D柱状图


上图源代码如下：

<!--全国各省上访量-->

<%@pageimport="com.fsm.datetime.DateTime"%>

<%@pagecontentType="text/html;charset=GBK"%>

<%@pageimport="java.util.*,com.fsm.db.*"%>

<%  

   

    DBService dbservice = new DBService();

    DateTime datetime  = new DateTime();

StringBufferstrDataXML  = new StringBuffer();

DBSetdbset = null;

DBMap  dbmap = new DBMap();

StringstrYear = request.getParameter("strYear");

StringstrSQL="select sum(ColValue2) sumTID,RepRowName1 TName from c_chart2 whererecorddateyear='"+strYear+"' group by RepRowID,RepRowName1 order by RepRowID asc";

dbset=dbservice.getSelectSet(strSQL);

strDataXML.append("<chart caption='到部来访量（"+strYear+"年）' xAxisName='省份'  yAxisName='来访量' showValues='1' numberPrefix='' useRoundEdges='1' unescapeLinks='0'rotateNames='0' baseFontSize='14' FormatNumberScale='0'lableDisplay='Stagger'>");

for(inti=0;i<dbset.size();i++){

String  strName=dbset.getValue(i,"TName");   

String  strValue=dbset.getValue(i,"sumTID");

strDataXML.append("<setvalue='"+strValue+"' label='"+strName+"'link='c_chart1_4.jsp?strYear="+strYear+"&strProvinceName="+strName+"'/>");

} 

strDataXML.append("<styles><definition><style name='myAnim' type='animation' param='_yScale'start='0' duration='1'/> </definition><application><applytoObject='VLINES' styles='myAnim' /></application></styles>");

   strDataXML.append("</chart>");

    String strXML = strDataXML.toString();

%>

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=gb2312">

    <script language="JavaScript"src="../Charts/js/FusionCharts.js"></script>   

    <script language=javascript>

functiongetBack(){

history.go(-1);

}

functiongetPid(data1){

window.open("c_chart1_2_1.jsp?Year="+data1+"");

}

</script>

</head>

<body>

<divid="chartdiv" align="center"></div>

  <scripttype="text/javascript">

   var chart = newFusionCharts("../Charts/Column2D.swf", "ChartId","900", "500", "0", "0");

  chart.setDataXML("<%=strXML%>");          

   chart.render("chartdiv");

</script>

<br/>

<divalign="center" >

<input type="button" value="返回"οnclick="getBack()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<input type="button" value="类别饼图" οnclick="getPid(<%=strYear%>)">

</div>

</body>

</html>

3、折线图


上图源代码如下：

 

<!--某省各一年每月信访趋势-->

<%@pageimport="com.fsm.datetime.DateTime"%>

<%@pagecontentType="text/html;charset=GBK"%>

<%@pageimport="java.util.*,com.fsm.db.*,com.fsm.datetime.*"%>

<%  

   

        DBService dbservice = new DBService();

        DateTime  datetime = new DateTime();

        StringBuffer strDataXML  = new StringBuffer();

DBSetdbset = null;

StringstrYear = request.getParameter("strYear");

StringstrProvinceName = request.getParameter("strProvinceName");

 strProvinceName =java.net.URLDecoder.decode(strProvinceName);

StringstrSQL = "select sum(ColValue2) sumTID,recorddatemonth tmonth fromc_chart2 a where recorddateyear='"+strYear+"' andRepRowName1='"+strProvinceName+"' group by recorddatemonth order byrecorddatemonth asc";

       strDataXML.append("<chart caption='"+strProvinceName+"到部来访趋势（"+strYear+"年）' xAxisName='月份' yAxisName='来访量' bgColor='91AF46,FFFFFF'  divLineColor='91AF46' divLineAlpha='30'alternateHGridAlpha='5' canvasBorderColor='666666' baseFontColor='666666'  numVDivlines='7'  lineColor='FF5904' showValues='1'  >");//XML开始

   

    dbset = dbservice.getSelectSet(strSQL);

for(inti=0;i<dbset.size();i++){

String  iNum =dbset.getValue(i,"sumTID");   

strDataXML.append("<setlabel='"+dbset.getValue(i,"tmonth")+"月' value='"+iNum+"' />");

}

       strDataXML.append("</chart>");

        String strXML = strDataXML.toString();

%>

    <html>

    <head>

<metahttp-equiv="Content-Type" content="text/html;charset=gb2312">

    <script language="JavaScript"src="../Charts/js/FusionCharts.js"></script>

 <script language="JavaScript">

     function getBack(){

history.go(-1);

}

 </script>

   

   </head>

   <bodystyle="overflow-y:hidden">

 

<divid="chartdiv" align="center"></div>

    <scripttype="text/javascript">

   var chart = newFusionCharts("../Charts/Line.swf", "ChartId","800", "600", "0", "0");

  chart.setDataXML("<%=strXML%>");          

   chart.render("chartdiv");

</script>

<divalign="center" >

<input type="button" value="返回"οnclick="getBack()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

</div>

 </body>

 </html>

 

4、饼图


上图源代码如下：

<%@pagecontentType="text/html;charset=GBK"%>

<%@include file="../../public/logincheck.jsp"%>

<%@pageimport="java.util.*,

                com.fsm.db.*,

                com.fsm.report.ReportUtil"

%>

<%

    DBService dbservice = new DBService();

    DBSet    dbset = new DBSet();

    DBMap    dbmap = new DBMap();

   

    StringstrYear=request.getParameter("Year");

   

    String strSQL="selecttypename1,sum(typename1value) as ColValue1,typename2,sum(typename2value) asColValue2,typename3,sum(typename3value) asColValue3,typename4,sum(typename4value) as ColValue4,typename5,sum(typename5value)as ColValue5 from c_chart3_1 where recordyear = ? group by typename1,typename2, typename3, typename4, typename5";

    dbset.add(strYear);

         dbmap.put(strSQL, dbset);

    dbset = dbservice.getSelectSet(dbmap);

   

    StringBuffer sbDataXML = newStringBuffer();

    StringBuffer sbData1 = new StringBuffer();

     

   sbDataXML.append("<chart showAboutMenuItem='0'  caption='"+strYear+"年到公安部窗口登记来访情况统计图(起数)'subCaption='' palette='1' baseFontSize='14' decimals='2' showBorder='1'    showLabels='1' showLegend='1'baseFontSize='14' animation='1' showValues='1' enableSmartLabels='1'formatNumberScale='0'  >");

    if(dbset!=null)

    {

       if(dbset.size()>0)

       {

           sbData1.append("<setlabel='"+dbset.getValue(0,"typename1")+"'value='"+dbset.getValue(0,"ColValue1")+"' isSliced='0'/>");

           sbData1.append("<setlabel='"+dbset.getValue(0,"typename2")+"'value='"+dbset.getValue(0,"ColValue2")+"' isSliced='0'link='c_chart1_2_4.jsp?Year="+strYear+"'/>");

           sbData1.append("<setlabel='"+dbset.getValue(0,"typename3")+"'value='"+dbset.getValue(0,"ColValue3")+"' isSliced='0'/>");

           sbData1.append("<setlabel='"+dbset.getValue(0,"typename4")+"'value='"+dbset.getValue(0,"ColValue4")+"' isSliced='0'link='c_chart1_2_6.jsp?Year="+strYear+"'/>");

           sbData1.append("<setlabel='"+dbset.getValue(0,"typename5")+"'value='"+dbset.getValue(0,"ColValue5")+"' isSliced='0'link='c_chart1_2_2.jsp?Year="+strYear+"'/>");

       }        

    }

   

    sbDataXML.append(sbData1);

   sbDataXML.append("</chart>");

%>

<html>

<head>

<linkhref="../../css/report.css" rel="stylesheet"type="text/css"/>

<SCRIPTsrc="../../js/windowsmenu.js"></SCRIPT>

<script src="../../windows7/Charts/js/FusionCharts.js"language="JavaScript"></script>

<SCRIPTsrc="../../js/report.js"></SCRIPT>

</head>

<OBJECT  id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2  height=0 width=0></OBJECT>

<bodyscroll="auto">

<objectid="factory" style="display:none" viewastextclassid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814"codebase="./smsx.cab#Version=6,2,433,70"></object>

<scriptlanguage=javascript>

//设置右键菜单和打印页边距

window.οnlοad=function()

{

    addQuickMenu();

   PageSetup_Option(document.getElementById("factory"),15,8,19.05,19.05,false);

}

//返回的javascript代码

functiongetBack(){

history.go(-1);

}

 

</script>

 

<div id="chartdiv" align="center">正在加载统计图...</div>

<scripttype="text/javascript">

    var fcChart = newFusionCharts("../../windows7/Charts/Pie3D.swf"+strChartMessages,"fcChartId", "800", "500", "0","1");

   fcChart.setDataXML("<%=sbDataXML.toString()%>");

    fcChart.render("chartdiv");

</script>

      <div align="center" >

<input type="button" value="返回"οnclick="getBack()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

</div>

</body>

</html>

飞二狗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用FusionCharts XT为iPhone和iPad应用创建图表
11-14
利用FusionCharts XT为iPhone和iPad应用创建图表的实例，支持重力感应。
FUSION CHART自学教程
Mr_yczhang的博客
05-04 1176
1.     安装fusionchart Fusionchart核心文件如下图： 其中“charts”文件夹下是各种swf文件，“FusionChartsExportComponent.js”作用是导出图片或pdf时引用该文件。 2.     Fusionchart简单使用流程 Fusionchart使用xml文件作为数据源读取数据，如下介绍一个简单的例子： 数据文件Column3D
深入浅出CChart 每日一课——红花当然配绿叶，CChart辅助图形绘制
最新发布
baita96的专栏
02-12 1119
各位同学，好久不见，我可想死你们了！！！咦，那位不是巩叔吗？不好意思，侵权了，请多担待@_@。前面的课程呢，拓展的内容比较多，最近笨笨想聚焦在CChart本身的使用上，进行一些介绍。本节课主要想介绍CChart的辅助图形绘制，主要包括三方面内容：1、页面注释（题注和脚注）；2、标签注释；3、辅助图元（直线、矩形、椭圆、正圆）。会用Microsoft Word的人，对题注和脚注应该不陌生，大体如下，也就是在文档的顶部和底部显示一些简单的信息。有时候画曲线的时候可能也需要题注和脚注。
FusionChart
龙傲天的博客
07-29 212
caption 图表主标题 subCaption 图表副标题 xAxisName 横向坐标轴(x轴)名称 yAxisName 纵向坐标轴(y轴)名称 lineThickness 线的粗细 labelDisplay='' Label的展示形式 AUTO(长数据标签被截断用省略号替换超出X轴范围的部分) WRAP(可以将长数据标签显示在多行里。如果图表的可用空间不够，该模式会自动截断标签并且在末尾加上省略号) STAGGER(Label显示多少行 staggerLines='2' 指定交错模式的层...
fusionChart 图表插件 我们要显示漂亮的图表 就来看看
aini2749的博客
02-04 135
Fusionchart插件是用来显示各种各样的图表 的有用插件，我们有必要为了以后我们显示图表的时候少走弯路，来了解一下这个插件的使用。首先我们来看一下FusionChart插件可以用来显示的图表类型，我在这里只是列举几个图表类型，因为FusionChart支持很多种图表的输出，所以我们仅仅用来说明几个图表类型。 2D柱状图 3D柱状图 3D饼图 2D折...
fusionCharts的详细解析与应用
热门推荐
liangxanhai的专栏
10-10 1万+
一、fusioncharts的介绍：        FusionCharts是一个Flash的图表组件，它可以用来制作数据动画图表，其中动画效果用的是Adob  e Flash 8 （原Macromedia Flash的）制作的flash ， FusionCharts可用于任何网页的脚本语言类似于HTML ， .NET，ASP ， JSP技术的， PHP ， ColdFusion等，提供互动性和
fusionchart
07-31
fusionchart，强大的flash画图工具
fusionChart
09-08
fusionChart所需的swf资源全部和script文件，引入后可以实现fusionChart在web网页上的应用
fusionchart实例
03-22
fusionchart实例，可以更好的帮助你掌握fusionchart
CChart教程
06-07
CChart教程详细使用教程，从安装到进阶，循序渐进，适合各种画图场合
FusionCharts的使用方法
07-01 484
今天统计价格变化规律的时候找到的一个很好的文档，很详细 一、简介 ØFusionCharts是InfoSoftGlobal公司的一个产品，InfoSoftGlobal公司是专业的Flash图形方案提供商，他们还有几款其他的，基于Flash技术的产品，都非常的漂亮。 ØFusionChartsFree则是FusionCharts提供的一个免费版本，虽然免...
Fusioncharts常用参数设置
baidu_32911889的博客
08-09 1269
1.1 &lt;chart&gt;参数设置： 图表和轴的标题 * caption=”String” : 图表上方的标题 * subCaption=”String” : 图表上方的副标题 * xAxisName= “String” : X轴的名字 * yAxisName= “String” : y轴的名字 1.1.2 通用参数 * shownames=”1/0″ : 设置是否在x轴下显示&lt;s...
fusioncharts入门系列3之柱状图与折线图
daxiang的专栏
12-10 8544
柱状图代码示例index.html： function init(){ var chart = new FusionCharts("fusioncharts/Column3D.swf", "myChartId" ,"500","300","0","1"); chart.setDataURL("date2.xml");
详解FusionChart图表控件点击事件
tianshijianbing1989的专栏
05-02 1819
（1）点击执行js 在页面中添加点击chart后需要触发的js事件： 1 2 3 4 5      function myJS(myVar){       window.alert(myVar);    }   在拼写加载chart时使用的xml文件时，在中添加
FusionChart图表控件使用说明
zengxin2008的专栏
11-24 2015
图片控件，http://www.fusioncharts.com/ 一.的属性说明： 1.caption:图表的大标题，subCaption图表的子标题 2.decimalPrecision:数字显示的精度 3.showNames:是否显示元素的名字（似乎只用饼图支持这个），0不显示，1显示，例如：,如果为1则显示Factory,否则不显示; showValues:是否显示元素的值，和上
FusionCharts图表生成方式及实例-3D饼图
廉颇老矣，尚能饭否？ (jdk+算法+spring+netty+大数据+OS+Architect)
09-03 203
最近项目中报表数据的图表展示采用了FusionCharts，功能需求如下：1.提供在线flash图表展示。2.根据周期性报表的数据，生成静态html文件，提供用户订阅。   功能实现思路：1.对于提供在线flash图表展示，主要参考了FusionCharts的文档示例,具体实现可见下面实例。注意一点： 因为生成xml文件会增加磁盘IO操作，会降低图表生成功能的整体性能，所以对于用户请求返回页...
Fusionchart官方API 由谷歌浏览器翻译通过（加我备注）如何更改chart错误信息
hanqing
12-20 1680
更改图表消息 FusionCharts v3的，你可以改变会显示“没有数据显示”用户喜欢的各种消息，“载入图表”，“检索数据”等。 下面的图表属性定义不同的消息： 属性名（消息类型） 它做什么？ 它控制着什么样的信息（默认值） PBarLoadingText 图加载时设置的自定义消息。 正在载入图表。请
fusionchart如何设置宽度
05-26
你可以使用 FusionCharts 的 `width` 属性来设置图表的宽度。你可以在初始化图表时传递这个属性，或者在 FusionCharts 的 JavaScript API 中动态设置它。例如： ```javascript // 初始化图表时设置宽度 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值