成人精品一区在,日韩精品91,国产精品剧情一区

欧美日韩亚-欧美日韩亚州在线-欧美日韩亚洲-欧美日韩亚洲第一区-欧美日韩亚洲二区在线-欧美日韩亚洲高清精品

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

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

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

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

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

Flash圖表控件 FusionCharts 就可以很好的解決上面所說(shuō)的問(wèn)題，步驟如下：

1、使用JavaScript加載第一個(gè)圖形。

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

<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)用戶單擊按鈕時(shí)調(diào)用這個(gè)方法。        
* 這個(gè)方法用來(lái)使用新的SWF文件創(chuàng)建一個(gè)新的FusionCharts實(shí)例。        
 */        
 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)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

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

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