FusionCharts如何实现动态改变图形的类型和数据-控件新闻-慧都网

FusionCharts如何实现动态改变图形的类型和数据

原创|其它|编辑：郝浩|2012-06-03 21:47:09.000|阅读 4399 次

概述：在项目中，我们有时会需要在页面上方便地改变图形的类型，当然，如果页面不刷新就能看到改变的结果，那是最理想的。本文主要介绍如何通过FusionCharts作为你的报表解决方案来动态改变图形的类型和数据

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

在项目中，我们有时会需要在页面上方便地改变图形的类型，当然，如果页面不刷新就能看到改变的结果，那是最理想的。本文主要介绍如何通过FusionCharts作为你的报表解决方案来动态改变图形的类型和数据

动态改变图形的类型

在FusionCharts里，是怎么实现动态改变图形的类型的需求呢？简单点说，思路是这样的：

1、使用JavaScript加载第一个图形（如柱状图），至于是用dataXML方法，还是dataURL方法，都可以。

2、当需要改变图形类型（如改成饼图）时，我们再创建一个新的FusionCharts类实例（它的SWF文件是饼图），把它render到原来的DIV。

我们来看看代码吧。

<HTML>

<HEAD>

      <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
      <SCRIPT LANGUAGE="JavaScript">
         //数据
         var strXML = "<graph caption='Hours worked' showNames='1'>
<set name='Tom' value='32' color='AFD8F8'/>
     <set name='Mary' value='16' color='F6BD0F'/>

<set name='Jane' value='42' color='8BBA00'/></graph>";
         /*
         * 当用户单击按钮时调用这个方法。
  * 这个方法用来使用新的SWF文件创建一个新的FusionCharts实例。
         */
         function updateChart(chartSWF){
            //Create another instance of the chart.
            var chart1 =
new FusionCharts(chartSWF, "chart1Id", "400", "300", "0", "0");
            chart1.setDataXML(strXML);
            chart1.render("chart1div");
         }
      </SCRIPT>

</HEAD>

<BODY>

FusionCharts

   </div>
   <script language="JavaScript">
      var chart1 = new FusionCharts("../../FusionCharts/FusionCharts_Column3D.swf", "chart1Id", "400", "300", "0", "0");
      chart1.setDataXML(strXML);
      chart1.render("chart1div");
   </script>

Show as:

</form>

</CENTER>

</BODY>

</HTML>

上面的代码非常浅显，就不做解释了。

动态改变图形的数据

我们已经会动态改变图形的类型了，动态改变数据和上面的原来一样，我们只需要在新建实例的时候，传入新的数据就可以了。

那么为什么还要单独来讲解这个呢？因为FusionCharts给我们提供了一个更简单的方法，那就是updateChartXML(domid,data)。它的第一个参数就是我们在创建FusionCharts实例时设置的图形domid，第二个参数是XML数据字符。

来看看下面的代码。

<HTML>

<HEAD>

<TITLE>FusionCharts Free & JavaScript - Updating chart using setDataXML() Method</TITLE>

      <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
      <SCRIPT LANGUAGE="JavaScript">
         function updateChart(DOMId){
            updateChartXML(domId,"<graph><set name='A' value='32' />
</graph>");
          }
      </SCRIPT>

</HEAD>

<BODY>

FusionCharts

      </div>
      <script language="JavaScript">
         var chart1 = new FusionCharts("../../FusionCharts/FusionCharts_Column3D.swf", "chart1Id", "400", "300");
         chart1.setDataXML("<graph><set name='A' value='10' color='D64646' />
<set name='B' value='11' color='AFD8F8' /></graph>");
         chart1.render("chart1div");
      </script>

</form>

</HTML>

当我们单击”改变数据“按钮后，会调用updateChart()方法，它会使用新的数据来重新构建图形。

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自：网络转载

上一篇：如何通过XML实现FusionCharts组合图下一篇：正确处理FusionCharts图表中的特殊字符