FUSION CHART自学教程

最新推荐文章于 2018-08-09 10:31:46 发布
最新推荐文章于 2018-08-09 10:31:46 发布
阅读量1.1k 收藏
点赞数
分类专栏： 报表 文章标签： fusion chart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_yczhang/article/details/45478291
版权


1.     安装fusionchart

Fusionchart核心文件如下图：

其中“charts”文件夹下是各种swf文件，“FusionChartsExportComponent.js”作用是导出图片或pdf时引用该文件。

2.     Fusionchart简单使用流程

Fusionchart使用xml文件作为数据源读取数据，如下介绍一个简单的例子：

数据文件Column3D.xml

<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units'

    showValues='0' decimals='0' formatNumberScale='0'>

    <set label='Jan' value='462' />

    <set label='Feb' value='857' />

    <set label='Mar' value='671' />

    <set label='Apr' value='494' />

    <set label='May' value='761' />

    <set label='Jun' value='960' />

    <set label='Jul' value='629' />

    <set label='Aug' value='622' />

    <set label='Sep' value='376' />

    <set label='Oct' value='494' />

</chart>  

展示文件Column3D.jsp

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="<%=request.getContextPath() %>/fcf/css/Style.css" type="text/css" />

<script language="JavaScript" src="<%=request.getContextPath() %>/fcf/js/FusionCharts.js"></script>

</head>

 

<body>

    <div id="chartdiv" align="center">

        FusionCharts. </div>

      <script type="text/javascript">

         var chart = new FusionCharts("<%=request.getContextPath() %>/fcf/Charts/Column3D.swf", "ChartId", "600", "375", "0", "0");

         chart.setDataURL("<%=request.getContextPath() %>/data/single/Column3D.xml");      

         chart.render("chartdiv");

      </script>

当访问该jsp时，即可展示报表


 

3.     Fusionchart导出图片或pdf(客户端方式)

导出图片或pdf时，需要设这xml文件根节点，如下：

<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units'

   showValues='0' decimals='0' formatNumberScale='0'

   exportEnabled='1'  exportAtClient='1' exportShowMenuItem='1'

   exportHandler='fcExporter1' showExportDialog='1' exportDialog='please waiting...'

   exportDialogColor='ff0000' exportFormats='PDF=Export as PDF|PNG=Export as PNG|jpg=Export as JPG'

   >

   数据不变…………

上述红色加粗字段为客户端导出图片必须的属性。

Column3D.jsp中需要添加内容：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>FusionCharts v3 Documentation</title>

<link rel="stylesheet" href="<%=request.getContextPath() %>/fcf/css/Style.css" type="text/css" />

<script language="JavaScript" src="<%=request.getContextPath() %>/fcf/js/FusionCharts.js"></script>

//新引入该js文件

<script language="JavaScript" src="<%=request.getContextPath() %>/fcf/js/FusionChartsExportComponent.js"></script>

</head>

<div id="chartdiv" align="center">

        FusionCharts. </div>

      <script type="text/javascript">

          var chart = new FusionCharts("<%=request.getContextPath() %>/fcf/Charts/Column3D.swf", "ChartId", "600", "375", "0", "1");

          chart.setDataURL("<%=request.getContextPath() %>/data/single/Column3D.xml");       

          chart.render("chartdiv");

       </script>

//从此处开始……新增div 存储导出按钮

<div id="fcexpDiv" align="center" style="text-align:center; width:100%;">

        FusionCharts Export Handler Component

    </div>

     <script type="text/javascript">

           //设置导出的保存按钮　　　 

         var myExportComponent = new FusionChartsExportObject("fcExporter1", "<%=request.getContextPath() %>/fcf/Charts/FCExporter.swf");     

            myExportComponent.componentAttributes.width = '1024';   

            myExportComponent.componentAttributes.height = '60';   

            //Background color   

            myExportComponent.componentAttributes.bgColor = 'ffffdd';   

            //Border properties   

            myExportComponent.componentAttributes.borderThickness = '2';  

            myExportComponent.componentAttributes.borderColor = '0372AB';   

            //Font properties   

            myExportComponent.componentAttributes.fontFace = 'Arial';   

            myExportComponent.componentAttributes.fontColor = '0372AB';   

            myExportComponent.componentAttributes.fontSize = '12';   

            //Message - caption of export component   

            myExportComponent.componentAttributes.showMessage = '1';   

            myExportComponent.componentAttributes.message = '先右击图表导出,再点击下边按钮进行保存.';   

            //Button visual configuration   

            myExportComponent.componentAttributes.btnWidth = '200';   

            myExportComponent.componentAttributes.btnHeight= '25';   

            myExportComponent.componentAttributes.btnColor = 'E1f5ff';   

            myExportComponent.componentAttributes.btnBorderColor = '0372AB';   

            //Button font properties   

            myExportComponent.componentAttributes.btnFontFace = 'Verdana';   

            myExportComponent.componentAttributes.btnFontColor = '0372AB';   

            myExportComponent.componentAttributes.btnFontSize = '15';   

            //Title of button   

            myExportComponent.componentAttributes.btnsavetitle = '保存图表或pdf';   

            myExportComponent.componentAttributes.btndisabledtitle = '等待导出...';     

            myExportComponent.Render("fcexpDiv");

       </script>

注意：需要将：

var chart = new FusionCharts("<%=request.getContextPath() %>/fcf/Charts/Column3D.swf", "ChartId", "600", "375", "0", "0");

最后的0改成1

 

注意下面两个参数，参数一是对应xml根节点中的exportHandler属性，参数二是charts文件夹下的文件

var myExportComponent = new FusionChartsExportObject("fcExporter1", "<%=request.getContextPath() %>/fcf/Charts/FCExporter.swf"); 

这时，展示的报表为：

可以看见下方有个按钮，目前不能点击，当在报表上右键选择导出某一选项时，会弹出进度条：

进度条读取完毕，即可点击按钮，将图片或pdf保存到本地


 

4.     Fusionchart导出图片或pdf(服务器方式)

据说服务器方式占用资源较大，但是好处是可以将图片或pdf保存在服务器内某处，以后用到可以下载，也可以整合到word中。现在介绍下：

第一步，从下载的fusionchart完整压缩包中取出本项目所使用到的jsp和jar包如下图：

将该jar放入项目lib下，将该jsp文件夹放入项目fusionchart下如图：

第二步，从下载的fusionchart完整压缩包中取出本项目所使用到的fusionchart配置文件：

将该配置文件放入项目配置文件目录：

内容修改如下：

#没发现用处

EXPORTHANDLER=FCExporter_

#FCExporter_IMG.jsp and FCExporter_PDF.jsp 两个文件路径

RESOURCEPATH=/fcf/JSP/Resources/

#输出

SAVEPATH=./images/fcfImage/

# 没发现它的用处

HTTP_URI=http://localhost:8080/FCReport/images/fcfImage/

 

#若文件重名是否覆盖

OVERWRITEFILE=false

INTELLIGENTFILENAMING=true

FILESUFFIXFORMAT=TIMESTAMP

第三步，修改Xml文件根节点如下：

<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units'

   showValues='0' decimals='0' formatNumberScale='0'

   exportEnabled='1'  exportAtClient='0' exportShowMenuItem='1'

   exportCallback='FC_Exported' exportAction='save'

   exportHandler='../../../fcf/JSP/FCExporter.jsp' showExportDialog='1' exportDialog='please waiting...'

   exportDialogColor='ff0000' exportFormats='PDF=Export as PDF|PNG=Export as PNG|JPEG=Export as JPEG|JPG=Export as JPG'

   >

数据…………

 

解释：

exportEnabled  代表是否允许导出

exportAtClient 代表是否使用客户端方式导出0代表不使用，1代表使用

exportCallback 代表操作执行完毕后 回调函数名称(FC_Exported)jsp内

exportAction   代表将文件下载或存入服务器路径 若值为save则存储，值为download则下载

exportFormats  代表允许导出的类型 右键可见

第五步，修改jsp，添加回调函数（非必须，只是为了save方式执行完毕有个提示）

<script type="text/javascript">

              var chart = new FusionCharts("<%=request.getContextPath() %>/fcf/Charts/Column3D.swf", "ChartId", "600", "375", "0", "1");

              chart.setDataURL("<%=request.getContextPath() %>/data/single/Column3D_s.xml");                

              chart.render("chartdiv");

//回调函数                    

 function FC_Exported(objRtn) {

             if (objRtn.statusCode == "1") {

                 alert("保存成功");

             }

             else {

                 alert("保存失败: " + objRtn.statusMessage + ". Its DOM Id is " + objRtn.DOMId);

             }

        }

                   </script>

 

 


 

5.     使用动态数据源（java生成xml）

这里只介绍请求到来后生成xml文档格式并将其转换成长字符串的代码：

package com.admin.util;

 

import java.io.ByteArrayOutputStream;

import java.util.HashMap;

import java.util.Map;

import org.dom4j.Document;

import org.dom4j.DocumentHelper;

import org.dom4j.Element;

import org.dom4j.io.OutputFormat;

import org.dom4j.io.XMLWriter;

 

public class XmlUtil {

   

    /**

     * 创建根

     * @param args

     */

    public static Element createRoot(Map<String,String>attributesMap){

        //创建document对象

        Document doc = DocumentHelper.createDocument();

        //创建根"chart"  一级节点

        Element chart = doc.addElement("chart");

        //循环map 设置根的多个属性

        for(String name:attributesMap.keySet()){

            //eg:  caption='3D图例'

            chart.addAttribute(name, attributesMap.get(name));

        }

        return chart;

    }

   

    /**

     * 简单的xml单系列图使用

     * @param args

     */

    public static void setSingleElement(Element root,Map<String,String>attributesMap){

        // 二级节点

        Element set = root.addElement("set");

        for(String name:attributesMap.keySet()){

            //<set label='Jan' value='462' />

            set.addAttribute(name, attributesMap.get(name));

        }

    }

   

    /**

     * 多系列图首先设置categories属性

     * @param args

     */

    public static void  setCategoryElement(Element root,Map<String,String>attributesMap,String[]values){

       

        //创建<categories>  二级节点

        Element categories = root.addElement("categories");

       

        //设置categories的属性

        for(String name:attributesMap.keySet()){

            categories.addAttribute(name, attributesMap.get(name));

        }

       

        //创建多个<category name='Austria' />  三级节点

        for(String value:values){

            Element category = categories.addElement("category");

           

            category.addAttribute("name", value);

        }

    }

   

    /**

     * 多系列图首先设置dataset属性

     * @param args

     */

    public static void setDatasetElement(Element root,Map<String,String>attributesMap,String[]values){

       

        //创建<dataset>  二级节点

        Element dateset = root.addElement("dataset");

       

        //设置dataset属性 seriesName='1996' color='AFD8F8' showValues='0'

        for(String name:attributesMap.keySet()){

            dateset.addAttribute(name, attributesMap.get(name));

        }

       

        //创建多个<set value='25601.34' />  三级节点

        for(String value:values){

            Element set = dateset.addElement("set");

            set.addAttribute("value", value);

        }

    }

   

    /**

     * 将xml转换成String

     * @param root

     * @return

     */

    public static  String finalStringByRoot(Element root){

        String str = "";

        try {

            // 使用输出流来进行转化

            ByteArrayOutputStream out = new ByteArrayOutputStream();

            // 使用UTF-8编码--false 换行

            OutputFormat format = new OutputFormat("", true, "UTF-8");

            XMLWriter writer = new XMLWriter(out, format);

            writer.write(root.getDocument());

            str = out.toString("UTF-8");

        } catch (Exception ex) {

            ex.printStackTrace();

        }

        return str;

    }

   

    public static void main(String[] args) {

       

        //创建根

        Map<String,String> rootAttributeMap=new HashMap<String,String>();

        rootAttributeMap.put("caption", "每月销售额柱形图");//主标题

        rootAttributeMap.put("subcaption", "2006-2007");//符标题

        rootAttributeMap.put("xAxisName", "月份");//x轴名称

        rootAttributeMap.put("yAxisName", "units");//Y轴名称免费版不支持中文显示   

        rootAttributeMap.put("decimalPrecision", "0");

       

        Element root = createRoot(rootAttributeMap);

       

        //简单的单个系列图

    /*  Map<String,String> singeAttributeMap=new HashMap<String,String>();

       

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

            singeAttributeMap.put("name", i+"月");

           

            Random r=new Random();

            int value=r.nextInt(30000);

            singeAttributeMap.put("value", String.valueOf(value)); 

           

            setSingleElement(root, singeAttributeMap);

        }*/

       

       

        //多系列图 Category

        Map<String,String> categoryAttributeMap=new HashMap<String,String>();

        categoryAttributeMap.put("fontColor", "000000");

       

        String[] categoryValues = {"china","usa","uk","japan"};

        setCategoryElement(root,categoryAttributeMap,categoryValues);

       

        //多系列图 Dataset

        Map<String,String> datasetAttributeMap=new HashMap<String,String>();

        datasetAttributeMap.put("seriesName", "2006");

        String[] datasetValues0 = {"10000","7000","8000","3000"};

        setDatasetElement(root,datasetAttributeMap,datasetValues0);

       

        datasetAttributeMap.put("seriesName", "2007");

        String[] datasetValues1 = {"10000","7000","8000","3000"};

        setDatasetElement(root,datasetAttributeMap,datasetValues1);

       

        datasetAttributeMap.put("seriesName", "2008");

        String[] datasetValues2 = {"10000","7000","8000","3000"};

        setDatasetElement(root,datasetAttributeMap,datasetValues2);

       

        //输出

        System.out.println(finalStringByRoot(root));

       

    }

}

运行main方法输出的内容为：

<?xml version="1.0" encoding="UTF-8"?>

 

<chart xAxisName="月份" decimalPrecision="0" subcaption="2006-2007" caption="每月销售额柱形图" yAxisName="units">

<categories fontColor="000000">

<category name="china"/>

<category name="usa"/>

<category name="uk"/>

<category name="japan"/>

</categories>

<dataset seriesName="2006">

<set value="10000"/>

<set value="7000"/>

<set value="8000"/>

<set value="3000"/>

</dataset>

<dataset seriesName="2007">

<set value="10000"/>

<set value="7000"/>

<set value="8000"/>

<set value="3000"/>

</dataset>

<dataset seriesName="2008">

<set value="10000"/>

<set value="7000"/>

<set value="8000"/>

<set value="3000"/>

</dataset>

</chart>

将此报文传入fusionchart前，需要将其加密处理：

    String content = XmlUtil.finalStringByRoot(root);

   System.out.println(content);    

content = java.net.URLEncoder.encode(content, "utf-8");

并且，jsp页面接收内容的方法为：

var chart = new FusionCharts("<%=request.getContextPath() %>/fcf/Charts/Column2D.swf", "ChartId", "400", "275", "0", "0");

chart.setDataXML("${content}");

chart.render("chartdiv");

 

Mr_yczhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用FusionCharts XT为iPhone和iPad应用创建图表
11-14
利用FusionCharts XT为iPhone和iPad应用创建图表的实例，支持重力感应。
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等，提供互动性和
Mind fusion chart 最新破解代码
11-22
Mind fusion chart最新破解代码 拿走不谢，自带工程，可以编译成功！
Fusion chart Fex javascript web chart
01-26
Fusion chart Fex javascript web chart，包含开发包和实例代码
fusion chart 手册
04-17
fusion chart一篇介绍比较详细的文档，很值得一看。
fusion chart 多曲线图
07-28
fusion chart 多曲线图 包中己带有SWF文件
fusion chart中的雷达图
08-18
fusion chart中的雷达图.可以显示多个曲线，并且控制其是否显示
Fusionchart
飞二狗的海洋
03-18 813
步骤： 一、确定数据源 二、确定统计图的形状（折线、柱状图、饼图） 三、定x轴和y轴的值   fusionChart    1、3D柱状图 例1：Y轴是数据量，x轴是年度,数据柱状分俩种形式显示。 上图源代码如下： 历年到部来信来访数量-->         DBService dbservice = new DBService();       
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图表生成方式及实例-3D饼图
廉颇老矣，尚能饭否？ (jdk+算法+spring+netty+大数据+OS+Architect)
09-03 203
最近项目中报表数据的图表展示采用了FusionCharts，功能需求如下：1.提供在线flash图表展示。2.根据周期性报表的数据，生成静态html文件，提供用户订阅。   功能实现思路：1.对于提供在线flash图表展示，主要参考了FusionCharts的文档示例,具体实现可见下面实例。注意一点： 因为生成xml文件会增加磁盘IO操作，会降低图表生成功能的整体性能，所以对于用户请求返回页...
fusionchart 参数详细说明
04-23 618
功能特性animation                    是否动画显示数据，默认为1(True)showNames                    是否显示横向坐标轴(x轴)标签名称rotateNames                是否旋转显示标签，默认为0(False):横向显示showValues                    是否在图表显示对应的数据值，默认为1(T
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");
FusionCharts使用问题及解决方法(三)-FusionCharts常见问题大全
BTfan123的专栏
01-28 1101
前两篇文章中，我们总结了FusionCharts图表的一些常见问题（FAQ）及解决方法，本文继续讨论FusionCharts使用者常见的一些复杂的报错及解决方法。 当HTML、SWF和JavaScript文件在同一个文件夹中时， FusionCharts工作正常，但是如果它们被放到不同的文件夹中，FusionCharts无法正常工作？ 你需要注意以下几点： 1、如果你从另外一个域中获取数据的
Fusionchart官方API 由谷歌浏览器翻译通过（加我备注）如何更改chart错误信息
hanqing
12-20 1680
更改图表消息 FusionCharts v3的，你可以改变会显示“没有数据显示”用户喜欢的各种消息，“载入图表”，“检索数据”等。 下面的图表属性定义不同的消息： 属性名（消息类型） 它做什么？ 它控制着什么样的信息（默认值） PBarLoadingText 图加载时设置的自定义消息。 正在载入图表。请
FusionChart配置
u012925172的博客
07-15 229
&lt;style&gt;        &lt;bgColor&gt;FFFFFF&lt;/bgColor&gt;&lt;!--图表背景颜色 默认白色--&gt;        &lt;bgAlpha&gt;100&lt;/bgAlpha&gt;&lt;!-- 图表背景透明度 默认100 --&gt;        &lt;bgRatio&gt;0,100&lt;
virtuallab fusion教程
最新发布
06-06
以下是virtuallab fusion的教程： 1. 下载并安装virtuallab fusion软件。 2. 打开virtuallab fusion软件，点击“新建虚拟机”按钮。 3. 选择要安装的操作系统类型和版本，如Windows 10。 4. 设置虚拟机的名称和存储...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值