FusionCharts展示报表方法的步骤及例子

inspiratio 贡献于2010-12-29

作者 微软用户  创建于2009-12-30 07:29:00   修改者微软用户  修改于2009-12-30 09:13:00字数4570

文档摘要:FusionCharts展示报表方法的步骤及例子
关键词:

 FusionCharts展示报表方法的步骤及例子 To create any chart using FusionCharts, you need to assemble three things: 1. SWF File for the chart that you want to create. We want to create a 3D Column Chart, whose SWF file is named as Column3D.swf. All the chart SWF files are present in Download Package > Charts folder. 2. XML Data File. FusionCharts accepts data only in a pre-defined XML format. So, you'll need to convert your data to XML format - either using a server side scripting language or manually. 3. HTML Wrapper File. This HTML file would contain the code to embed the chart. 方法一:uses the simple HTML embedding method(例一和例二) 例一(画出3D柱状图): 步骤: 1)Setting the Chart SWF Month Net Revenue January $17400 February $19800 March $21800 April $23800 May $29600 June $27600 July $31800 August $39700 September $37800 October $21900 November $32900 December $39800 Copy all the chart SWF files (from Download Package > Charts folder) into this newly created folder (c:\FusionCharts\FusionCharts\). it's a good idea to keep all the chart SWF files in a root level folder named as FusionCharts. This makes sure that you do not have multiple copies of the same chart SWF. 2)Creating the XML data document we're plotting monthly sales summary for a given year, our data in tabular form would look something like below. Each month given below would be represented on the chart as a 3D column. The converted XML data would look as under (save it as Data.xml under c:\FusionCharts\MyFirstChart folder.):                                                             3)Creating the HTML container for chart(Save this file as Chart.html under MyFirstChart folder):           My First FusionCharts                                                               上述产生的3D柱状表为: 注意:html文件中的代码中的蓝色字体的Date.xml的命名要与xml文件的文件名相同,这样才能调用xml文件中的数据。 例二(画出3D饼状图): 步骤2)的xml数据文件仍可以使用,只需将步骤3)中的html文件中代码中的Column3D改为Pie3D及宽度width和高度height做相应适当调整即可: 如:                                        画出的3D饼状图为: 只需将html里的代码做类似的修改可以得到其他想要的图表 方法二:using FusionCharts JavaScript class to embed all your charts Create a JSChart.html in the same folder. Make the following changes to it: 例三(用JavaScript class方法画3D柱状图):                        
The chart will appear within this DIV. This text will be replaced by the chart.
     注意:只需将JSChart.html代码中的蓝色部分做相应的修改即可得到想要的图表的形状 画出的3D柱状图为下图所示: 例四:如果我想用上述JavaScript class方法画出一个二维的柱状图则只需将html文件中为../FusionCharts/Column3D.swf改为../FusionCharts/Column2D.swf 即:                        
The chart will appear within this DIV. This text will be replaced by the chart.
     画出的2D柱状图为:

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 15 金币 [ 分享文档获得金币 ] 3 人已下载

下载文档