国产人成,国产一区二区三区在线精品专区 ,午夜三级在线观看

如何用FusionCharts動態改變圖表類型

原創|其它|編輯：郝浩|2012-11-07 17:37:44.000|閱讀 600 次

概述：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@fc6vip.cn

文章轉載自：慧都控件

上一篇：如何使用Aspose.BarCode創建條形碼下一篇：Visifire for Silverlight/WPF多種統計圖效果