精品久热,日韩一品道,午夜肏屄片

FusionCharts如何實現動態改變圖形的類型和數據

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

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

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

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

動態改變圖形的類型

在FusionCharts里，是怎么實現動態改變圖形的類型的需求呢？簡單點說，思路是這樣的：

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

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

我們來看看代碼吧。

<HTML>

<HEAD>

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

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>

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

動態改變圖形的數據

我們已經會動態改變圖形的類型了，動態改變數據和上面的原來一樣，我們只需要在新建實例的時候，傳入新的數據就可以了。

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

來看看下面的代碼。

<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>

當我們單擊”改變數據“按鈕后，會調用updateChart()方法，它會使用新的數據來重新構建圖形。

標簽：

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

文章轉載自：網絡轉載

上一篇：如何通過XML實現FusionCharts組合圖下一篇：正確處理FusionCharts圖表中的特殊字符