FCF中文指南-第九章--动态改变图形的类型和数据
在前面的章节里，我们已经了解了图形的基本使用方法以及图形XML，现在我们已经有能力做出基本的图形了，如果你现在就把它应用到你的项目里，我认为没有任何问题，而且我也相信你还能举一反三地，发展出一些“新”的用法。
那我们就开始吧。
9.1动态改变图形的类型
在项目中，我们有时会需要在页面上方便地改变图形的类型，当然，如果页面不刷新就能看到改变的结果，那是最理想的。举个例子来说，在一个页面上，显示了一个月销售额的柱状图，但用户要求还可以查看月销售额的饼图，区域图。要实现这个需求，一般的做法是，再做两个页面，一个显示饼图，一个显示区域图，用户想看这两个图，点击连接就可以了。这样的做法并没有什么不妥。你还可以采用AJAX技术，来实现页面无刷新，这样用户的体验会更好一些。只是程序员累一点而已。
难道我们一定要这么累吗？不！其实我们可以有更好的办法，前提是你采用了FCF作为你的报表解决方案。
那么，在FCF里，是怎么实现上面的需求的呢？简单点说，思路是这样的：
1、使用JavaScript加载第一个图形（如柱状图），至于是用dataXML方法，还是dataURL方法，都可以。
2、当需要改变图形类型（如改成饼图）时，我们再创建一个新的FusionCharts类实例（它的SWF文件是饼图），把它render到原来的DIV。
就是这么简单。
我们来看看代码吧。
1. <HTML>
2. <HEAD>
3. <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
4. <SCRIPT LANGUAGE="JavaScript">
5. //数据
6. var strXML = "<graph caption='Hours worked' showNames='1'> <set name='Tom' value='32' color='AFD8F8'/>
7. <set name='Mary' value='16' color='F6BD0F'/><set name='Jane' value='42' color='8BBA00'/></graph>";
8. /*
9. * 当用户单击按钮时调用这个方法。
10. * 这个方法用来使用新的SWF文件创建一个新的FusionCharts实例。
11. */
12. function updateChart(chartSWF){
13. //Create another instance of the chart.
14. var chart1 = new FusionCharts(chartSWF, "chart1Id", "400", "300", "0", "0");
15. chart1.setDataXML(strXML);
16. chart1.render("chart1div");
17. }
18. </SCRIPT>
19. </HEAD>
20. <BODY>
21. <div id="chart1div">
22. FusionCharts
23. </div>
24. <script language="JavaScript">
25. var chart1 = new FusionCharts("../../FusionCharts/FCF_Column3D.swf", "chart1Id", "400", "300", "0", "0");
26. chart1.setDataXML(strXML);
27. chart1.render("chart1div");
28. </script>
29.
30. <form name='frmUpdate'>
31. Show as:
32. <input type='button' value='Column' onClick="javaScript:updateChart('../../FusionCharts/FCF_Column3D.swf');" name='btnColumn' />
33. <input type='button' value='Line' onClick="javaScript:updateChart('../../FusionCharts/FCF_Line.swf');" name='btnLine' />
34. <input type='button' value='Pie' onClick="javaScript:updateChart('../../FusionCharts/FCF_Pie3D.swf');" name='btnPie' />
35. </form>
36. </CENTER>
37. </BODY>
38. </HTML>
上面的代码非常浅显，就不做解释了。
9.2动态改变图形的数据
我们已经会动态改变图形的类型了，动态改变数据和上面的原来一样，我们只需要在新建实例的时候，传入新的数据就可以了。
那么为什么还要单独来讲解这个呢？因为FCF给我们提供了一个更简单的方法，那就是updateChartXML(domid,data)。它的第一个参数就是我们在创建FusionCharts实例时设置的图形domid，第二个参数是XML数据字符。
来看看下面的代码。
1. <HTML>
2. <HEAD>
3. <TITLE>FusionCharts Free & JavaScript - Updating chart using setDataXML() Method</TITLE>
4. <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
5. <SCRIPT LANGUAGE="JavaScript">
6. function updateChart(DOMId){
7. updateChartXML(domId,"<graph><set name='A' value='32' /></graph>");
8. }
9. </SCRIPT>
10. </HEAD>
11. <BODY>
12. <div id="chart1div">
13. FusionCharts
14. </div>
15. <script language="JavaScript">
16. var chart1 = new FusionCharts("../../FusionCharts/FCF_Column3D.swf", "chart1Id", "400", "300");
17. chart1.setDataXML("<graph><set name='A' value='10' color='D64646' /><set name='B' value='11' color='AFD8F8' /></graph>");
18. chart1.render("chart1div");
19. </script>
20. <form name='frmUpdate'>
21. <input type='button' value='改变数据' onClick="javaScript:updateChart('chart1Id');" name='btnUpdate'>
22. </form>
23. </HTML>
当我们单击”改变数据“按钮后，会调用updateChart()方法，它会使用新的数据来重新构建图形。
这种方案看起来，好像是比较好。然而，在前面我们说了，使用dataXML方法加载数据时，不能含有中文字符，同理，使用updateChartXML方法，也不能有中文字符。如果你要使用中文，还是用第一种方法吧。你可能会想，既然有updateChartXML方法，那是不是有updateChartURL方法呢？我们用它不就可以了吗？是的，是有这个方法，不过，FusionCharts Free版本里没有，只有FusionCharts版本里有。想用吗？拿钱来！
下章我们来讲讲FCF的下钻图形，听上去很专业，其实就是图形的连接，包括超连接，JavaScript。
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
