如何用FusionCharts动态改变图表类型 -控件新闻-慧都网

如何用FusionCharts动态改变图表类型

原创|其它|编辑：郝浩|2012-11-07 17:37:44.000|阅读 563 次

概述：fusioncharts实现动态的改变图表的类型的实例，附源码。

有时需要直接在页面上动态改变图表类型。举个例子：在一个页面上，显示了一个月销售额的柱状图，但用户还需要查看月销售额的饼图、区域图。要实现这个需求，一般做法是，再做两个页面，一个显示饼图，一个显示区域图，用户想看哪个图，点击连接就可以了。这样的做法并没有什么不妥。

除了上面的方案，我们还可以采用AJAX技术，实现页面无刷新，这样用户的体验会更好一些。

Flash图表控件 FusionCharts 就可以很好的解决上面所说的问题，步骤如下：

1、使用JavaScript加载第一个图形。

2、当需要改变图形类型（如改成饼图）时，创建一个新的FusionCharts类实例，示例代码如下：

<HEAD>      
 <SCRIPT LANGUAGE="Javascript" SRC="//www.cnblogs.com/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>      
 <div id="chart1div">      
FusionCharts        
</div>      
<script language="JavaScript">        
var chart1 = new FusionCharts("//www.cnblogs.com/FusionCharts/FCF_Column3D.swf", "chart1Id", "400", "300", "0", "0");        
chart1.setDataXML(strXML);        
 chart1.render("chart1div");        
 </script>         
<form name='frmUpdate'>      
 Show as:        
<input type='button' value='Column' onClick="javaScript:updateChart('//www.cnblogs.com/FusionCharts/FCF_Column3D.swf');" name='btnColumn' />        
 <input type='button' value='Line' onClick="javaScript:updateChart('//www.cnblogs.com/FusionCharts/FCF_Line.swf');" name='btnLine' />        
<input type='button' value='Pie' onClick="javaScript:updateChart('//www.cnblogs.com/FusionCharts/FCF_Pie3D.swf');" name='btnPie' />        
</form>      
 </CENTER>      
</BODY>

标签：

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

文章转载自：慧都控件

上一篇：如何使用Aspose.BarCode创建条形码下一篇：Visifire for Silverlight/WPF多种统计图效果