91干逼电影网,91免费在线,狠狠撸搜索

如何用FusionCharts動態(tài)改變圖表類型

原創(chuàng)|其它|編輯：郝浩|2012-11-07 17:37:44.000|閱讀 604 次

概述：fusioncharts實現(xiàn)動態(tài)的改變圖表的類型的實例，附源碼。

有時需要直接在頁面上動態(tài)改變圖表類型。舉個例子：在一個頁面上，顯示了一個月銷售額的柱狀圖，但用戶還需要查看月銷售額的餅圖、區(qū)域圖。要實現(xiàn)這個需求，一般做法是，再做兩個頁面，一個顯示餅圖，一個顯示區(qū)域圖，用戶想看哪個圖，點擊連接就可以了。這樣的做法并沒有什么不妥。

除了上面的方案，我們還可以采用AJAX技術(shù)，實現(xiàn)頁面無刷新，這樣用戶的體驗會更好一些。

Flash圖表控件 FusionCharts 就可以很好的解決上面所說的問題，步驟如下：

1、使用JavaScript加載第一個圖形。

2、當(dāng)需要改變圖形類型（如改成餅圖）時，創(chuàng)建一個新的FusionCharts類實例，示例代碼如下：

<HEAD>      
 <SCRIPT LANGUAGE="Javascript" SRC="//www.cnblogs.com/FusionCharts/FusionCharts.js"></SCRIPT>      
<SCRIPT LANGUAGE="JavaScript">      
 //數(shù)據(jù)        
 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>";        
 /**//*        
 * 當(dāng)用戶單擊按鈕時調(diào)用這個方法。        
* 這個方法用來使用新的SWF文件創(chuàng)建一個新的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>

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn

文章轉(zhuǎn)載自：慧都控件

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