189 8069 5689

FusionChart使用1

一、 FusionCharts构成的基本三要素:swfdata,承载图表的载体。
   Swf:Charts文件夹下面的所有swf文件,需要什么样的图表样式,就加在与之相对应的swf文件。
   Data:数据源。数据可以是*.xml, *.json 文件,也可以是代码中xmljson格式的数据。
   载体:页面中装载swf的空间组件。Egdivspan等等。
 
 二、装载swf的注意事项
 
1.  装载swf的基本语法
页面必须引用FusionCharts.js
"text/javascript" src="../ FusionCharts.js">
 
"chartdiv">FusionCharts will be loaded here!
 
 
Column3D.swf:所要展现的图表类型
LinkjavascriptData.xml:图表引用的数据源
 
FusionCharts(“swf”,”id”,”width”,”height”,”debugmodel”,”registerwithjs”):debugmodel通常设置为0,registerwithjs通常设置为1.
 2.  基本数据格式
XML文件开头,以结束;或者以开头,以结束。
XML标签属性有以下四种数据类型:布尔型、数字型、字符型、十六进制颜色代码(只支持十六进制的颜色表示,且去掉前面的#号)
 
Eg
"1.0" encoding="UTF-8"?>
'Weekly Sales Summary' xAxisName='Week' yAxisName='Sales'
    placeValuesInside='1' useRoundEdges='1' showBorder='1' exportEnabled="1"    exportHandler="fcExporter1" exportAtClient="1" exportFormats="JPEG=jpg|PDF=pdf">
   'Week 1' value='14400' displayValue='good' />
   'Week 2' value='19600' />
   'Week 3' value='24000' />
   'Week 4' value='15700' />
 
 
   
      
          'myBevel' type='Bevel' />
      
      
      'Background' styles='myBevel'/>
      
      
   
 
该data.xml运行的结果如下:
 三、 Charts文件中的swf文件及运行结果图(略)
四、结合javascript的应用
1.   前提:
置FusionCharts中的registerwithjs为1.(实际中似乎0也可以,但最好用1)
2.   事件:
1)        FC_Loaded(DOMId):描述当SWF文件在客户端已经完成下载
2)        FC_Rendered(DOMId):描述swf装载完成。
3)        FC_DataRendered(DOMId):描述当图表数据已经下载到dataxml或者dataURL
4)        FC_DataLoadError(DOMId):描述当从特定的URL下载数据发生错误
5)        FC_NoDataToDisplay(DOMId):描述当下载的xml文件里没有可显示的数据
6)        FC_DataXMLInvalid(DOMId):描述xml格式错误
3.   方法
1)        setDataXML(strDataXML:string):改变图表的数据
2)        setDataXML(strDataXML:string):改变图表的数据
3)        setDataURL(strDataURL:string):同上
4)        print():打印图表
5)        getXML():返回图表的xml数据
6)        getChartAttribute(attrNamr:string):返回xml 标记的属性
7)        hasRendered():布尔型,标志图表是否已经呈现成功
8)  getDataAsCSV():返回图表的数据位CSV字符型
五、热点链接:link=’’
四种链接方式:
1.        链接到同一个窗口:link='指定页面%3F参数' (link=’index.html?param’)
2.        链接到新的窗口:link='n-指定页面%3F参数' (link=’n-index.html?param’)
3.        链接到一个指定的framelink='F-FrameName-指定页面%3F参数'(注参数一般不能超过两个,当超过两个则必须追加为一个字符串用逗号分隔)
4.        链接到一个弹出框:link="P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no, resizable=no-ShowDetails.asp%3FMonth%3DJan"
5.        整个图表链接:clickURL='指定路径'
6.        链接到Js link="j-function()"
7.        Click 事件处理:link='S-parameter'(此方法是整个图表的链接情况)
 六、图表数据导出
1.        使用context menu:设置属性showExportDataMenuItem='1',并可以通过exportDataMenuItemLabel=” ”设置导出标签的名称。这样就可以把图表中的数据复制到剪贴板上了,然后打开记事本之类的东东就可以把数据粘贴到上面去了。
Eg:
Data.xml
'Weekly Sales Summary' xAxisName='Week' yAxisName='Sales'
    placeValuesInside='1' useRoundEdges='1' showBorder='1' showExportDataMenuItem='1'
    >
   'Week 1' value='14400' displayValue='good' />
   'Week 2' value='19600' />
   'Week 3' value='24000' />
   'Week 4' value='15700' />
显示:在图标上右击,有Copy data to clipboard.
2.        使用JavaScript Menu:首先置registerWithJS1,即var chart1 = new FusionCharts("../../FusionCharts/Column3D.swf", "chart1Id", "400", "300", "0", "1")。然后根据charts节点id获得一个对象,使用var chartObj = getChartFromId("chart1Id")方法。最后从这个对象取出图表里的数据,使用chartObj.getDataAsCSV( ),然后就可以进行你需要的处理了
 七、表导出为pdf或者图片(JPEGPNG)形式
1服务器端图表导出
1)        把jar包放到lib下面
2)        把classes文件发布到web-info下面
3)        在data.xml文件里加入exportEnabled='1'(允许导出)exportHandler='JSP/FCExporter.jsp'(即处理导出的路径,注意:默认是在跟data.xml在同一个跟目录下面)、还可以设置exportAction(选择导出的图片会到客户端作为下载还是直接保存到服务器)、exportAtClient(选择是选择客户端导出还是选择服务器端导出)等属性
4)        把FCExporter.jspFCExporterError.jsp放在web工程下面(注意:FCExporter.jspWEB_ROOT_PATH的路径,默认情况是Resources文件直接放在web工程下的,若将Resources文件放在其他文件包下面时注意修改WEB_ROOT_PATH路径
5)        处理流程:data.xml中指明exportHandler路径。触发导出时转向exportHandler所指向的路径FCExporter.jsp,在FCExporter.jsp中调用FusionChartsExportHelper.class中的HttpServletRequest类将data.xml中的数据以流的形式传进来,将charts的宽度、高度、颜色、domid作为元数据传入。并且根据选择是导出pdf还是图片导向resource下面的不同页面路径。(导出时会遇到数据传入的数据为空的情况,推荐使用客户端图表导出的方法)
2、客户端图表导出
1)        包含FusionChartsExportComponent.js文件
2)        包含FCExporter.swf文件
3)        设置xml文件里的一下属性:exportEnabled='1'(允许导出) exportAtClient='1' (客户端导出方式)exportHandler='fcExporter1'(处理导出)
4)        Html文件里加入
FusionCharts Export Handler Component
 3、批图表导出处理:
1)        前提:要批导出的数据共用一个xml文件,即共用数据。
2)        与单个导出的不同之处:
Ø myExportComponent.sourceCharts = ['myChartId1','myChartId2','myChartId3'];
Ø 用sourceCharts方法包含需导出的所以图表DOMid
Ø 设置导出图片相关的属性:componentAttributes。 

 

创新互联是一家专业提供安化企业网站建设,专注与网站设计制作、网站设计H5页面制作、小程序制作等业务。10年已为安化众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

附件:http://down.51cto.com/data/2359294

网站栏目:FusionChart使用1
网页网址:http://jkwzsj.com/article/jiegoe.html

其他资讯