FusionCharts 初次使用

最新推荐文章于 2017-04-07 09:36:19 发布

原创最新推荐文章于 2017-04-07 09:36:19 发布 · 688 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#FusionCharts #图形 #PowerCharts

FusionCharts 同时被 2 个专栏收录

1 篇文章

订阅专栏

Java

0 篇文章

订阅专栏

本文介绍如何使用FusionCharts在S2SH环境下生成交互式报表，包括安装步骤、XML配置及页面显示代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写项目，要求生成报表，要用到FusionCharts，环境 S2SH、Tomcat、MyEclipse。在这里用的是PowerCharts。

1、下载相关：

第一步肯定是下载了，当然，先用免费的了，支持付费。百度一下，你就知道。（广告）

官网有文档，但它英文。（最全面、最好的还是官网的）

2、XML文档：

这个直接复制的官网文档的。使用是根据需求自己建。

<chart palette="2" caption="Please estimate product sales for 2007, 2008 & 2009" subcaption="Drag the top edge of dashed columns to adjust data" showvalues="0" xAxisName="Year" yAxisName="Units" restoreBtnBorderColor="A2A3A0" formBtnBorderColor="A2A3A0" formAction="DataHandler.html">

<categories>
<category name="2005 (Actuals)"/>
<category name="2006 (Actuals)"/>
<category name="2007 (Predicted)"/>
<category name="2008 (Predicted)"/>
<category name="2009 (Predicted)"/>
</categories>

<dataset id="IJ" seriesName="Inkjet Printers">
<set id="IJ2005" value="25601" allowDrag="0"/>
<set id="IJ2006" value="20148" allowDrag="0"/>
<set id="IJ2007" value="17372" dashed="1"/>
<set id="IJ2008" value="35407" dashed="1"/>
<set id="IJ2009" value="38105" dashed="1"/>
</dataset>

<dataset id="LJ" seriesName="Laser Printers" showValues="0">
<set id="LJ2005" value="57401" allowDrag="0"/>
<set id="LJ2006" value="41941" allowDrag="0"/>
<set id="LJ2007" value="45263" dashed="1"/>
<set id="LJ2008" value="117320" dashed="1"/>
<set id="LJ2009" value="114845" dashed="1"/>
</dataset>

<dataset id="CR" seriesName="Cartridges" showValues="0">
<set id="CR2005" value="45000" allowDrag="0"/>
<set id="CR2006" value="44835" allowDrag="0"/>
<set id="CR2007" value="18722" dashed="1"/>
<set id="CR2008" value="77557" dashed="1"/>
<set id="CR2009" value="92633" dashed="1"/>
</dataset>

<styles>

<definition>
<style name="myCaptionFont" type="font" font="Arial" size="14" bold="1"/>
<style name="mySubCaptionFont" type="font" font="Arial" size="10" bold="0"/>
</definition>

<application>
<apply toObject="Caption" styles="myCaptionFont"/>
<apply toObject="SubCaption" styles="mySubCaptionFont"/>
</application>
</styles>
</chart>

3、页面显示相关代码：

div class="Datachart1">
<div id="chartdiv1" align="center">图形将出现这个DIV里，到时这里的字将被图形替代。</div>
<script type="text/javascript">
<%-- 1、建立对象 --%>
<%-- FusionCharts()参数说明：A、swf文件地址。B、图形ID，唯一值。C、图形宽。D、图形高。 --%>
var myChart = new FusionCharts("styles/FCF_MSColumn3D.swf", "myChartId", "450", "350");
<%-- 1、加载数据 --%>
myChart.setDataURL("data.xml");
<%-- 1、渲染图形到指定地点 --%>
myChart.render("chartdiv1");
</script>

在使用时，后台动态生成xml文档，传给前台，完工。（当然记得导入FusionCharts.js）