亚洲国产精品免费,69美女直播,亚洲日韩成人影院

FusionCharts如何實(shí)現(xiàn)動態(tài)改變圖形的類型和數(shù)據(jù)

原創(chuàng)|其它|編輯：郝浩|2012-06-03 21:47:09.000|閱讀 4425 次

概述：在項目中，我們有時會需要在頁面上方便地改變圖形的類型，當(dāng)然，如果頁面不刷新就能看到改變的結(jié)果，那是最理想的。本文主要介紹如何通過FusionCharts作為你的報表解決方案來動態(tài)改變圖形的類型和數(shù)據(jù)

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

在項目中，我們有時會需要在頁面上方便地改變圖形的類型，當(dāng)然，如果頁面不刷新就能看到改變的結(jié)果，那是最理想的。本文主要介紹如何通過FusionCharts作為你的報表解決方案來動態(tài)改變圖形的類型和數(shù)據(jù)

動態(tài)改變圖形的類型

在FusionCharts里，是怎么實(shí)現(xiàn)動態(tài)改變圖形的類型的需求呢？簡單點(diǎn)說，思路是這樣的：

1、使用JavaScript加載第一個圖形（如柱狀圖），至于是用dataXML方法，還是dataURL方法，都可以。

2、當(dāng)需要改變圖形類型（如改成餅圖）時，我們再創(chuàng)建一個新的FusionCharts類實(shí)例（它的SWF文件是餅圖），把它render到原來的DIV。

我們來看看代碼吧。

<HTML>

<HEAD>

      <SCRIPT LANGUAGE="Javascript" SRC="../../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實(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>

FusionCharts

   </div>
   <script language="JavaScript">
      var chart1 = new FusionCharts("../../FusionCharts/FusionCharts_Column3D.swf", "chart1Id", "400", "300", "0", "0");
      chart1.setDataXML(strXML);
      chart1.render("chart1div");
   </script>

Show as:

</form>

</CENTER>

</BODY>

</HTML>

上面的代碼非常淺顯，就不做解釋了。

動態(tài)改變圖形的數(shù)據(jù)

我們已經(jīng)會動態(tài)改變圖形的類型了，動態(tài)改變數(shù)據(jù)和上面的原來一樣，我們只需要在新建實(shí)例的時候，傳入新的數(shù)據(jù)就可以了。

那么為什么還要單獨(dú)來講解這個呢？因為FusionCharts給我們提供了一個更簡單的方法，那就是updateChartXML(domid,data)。它的第一個參數(shù)就是我們在創(chuàng)建FusionCharts實(shí)例時設(shè)置的圖形domid，第二個參數(shù)是XML數(shù)據(jù)字符。

來看看下面的代碼。

<HTML>

<HEAD>

<TITLE>FusionCharts Free & JavaScript - Updating chart using setDataXML() Method</TITLE>

      <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
      <SCRIPT LANGUAGE="JavaScript">
         function updateChart(DOMId){
            updateChartXML(domId,"<graph><set name='A' value='32' />
</graph>");
          }
      </SCRIPT>

</HEAD>

<BODY>

FusionCharts

      </div>
      <script language="JavaScript">
         var chart1 = new FusionCharts("../../FusionCharts/FusionCharts_Column3D.swf", "chart1Id", "400", "300");
         chart1.setDataXML("<graph><set name='A' value='10' color='D64646' />
<set name='B' value='11' color='AFD8F8' /></graph>");
         chart1.render("chart1div");
      </script>

</form>

</HTML>

當(dāng)我們單擊”改變數(shù)據(jù)“按鈕后，會調(diào)用updateChart()方法，它會使用新的數(shù)據(jù)來重新構(gòu)建圖形。

標(biāo)簽：

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

文章轉(zhuǎn)載自：網(wǎng)絡(luò)轉(zhuǎn)載

上一篇：如何通過XML實(shí)現(xiàn)FusionCharts組合圖下一篇：正確處理FusionCharts圖表中的特殊字符