国产精品成人国产乱,欧美日韩大片在,欧美精品在线

Flash圖表組件FusionCharts幫助文檔九：網格組件用法

原創|其它|編輯：郝浩|2012-11-21 14:26:14.000|閱讀 1986 次

概述：本文介紹了FusionCharts網格組件的用法，包括創建網格、在網格中插入圖表以及為網格提供參數。

相關鏈接：

網格組件能夠讓 FusionCharts 中的單序列數據以列表的形式顯示，我們可以將網格組件與單序列數據的圖表結合起來，形成一個不錯的組合。下面就來介紹一下FusionCharts網格組件的操作步驟。

創建網格

首先，我們創建一個帶有網格（沒有圖表）的基本頁面。先創建一個新的HTML文件SimpleGrid.html ，示例代碼如下：

<html>
  <head>
    <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
  </head>
  <body bgcolor="#ffffff">
           <div id="chartdiv" align="center">
              The grid will appear within this DIV. 
           </div>
     <script type="text/javascript">
      var myChart = new FusionCharts("../FusionCharts/SSGrid.swf", "myGrid1", "300", "200", "0", "1");
      myChart.setXMLUrl("Data.xml");
      myChart.render("chartdiv");
   </script>
  </body>
</html>

從以上代碼可以看出，和先前的許多圖表一樣，我們嵌入了網格組件(SSGrid.swf)，然后提供Data.xml作為dataURL， Data.xml包含以下單序列數據：

<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' decimals='0' formatNumberScale='0' labelDisplay='Rotate'>
    <set label='Jan' value='462' />
    <set label='Feb' value='857' />
    <set label='Mar' value='671' />
    <set label='Apr' value='494' />
    <set label='May' value='761' />
    <set label='Jun' value='960' />
    <set label='Jul' value='629' />
    <set label='Aug' value='622' />
    <set label='Sep' value='376' />
    <set label='Oct' value='494' />
    <set label='Nov' value='761' />
    <set label='Dec' value='960' />
</chart>

當你查看這個頁面時，你會看到如下輸出：

網格,FusionCharts

在網格中插入圖表

網格圖表就類似于使用了兩個圖表類型，唯一的區別就是網格和圖表使用的是同一個數據源，而不是兩個不同的數據源。請看下面這段HTML代碼(GridWithChart.html)：

<html>
  <head>
    <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
  </head>
  <body bgcolor="#ffffff">
    <div id="chartDiv" align="center">The chart will appear within this DIV. </div>      
    <script type="text/javascript">
      var myChart = new FusionCharts("../FusionCharts/Column2D.swf", "myChart", "300", "250", "0", "1");
      myChart.setXMLUrl("Data.xml");
      myChart.render("chartDiv");
    </script>
    <div id="gridDiv" align="center">The grid will appear within this DIV. </div>      
    <script type="text/javascript">
      var myGrid = new FusionCharts("../FusionCharts/SSGrid.swf", "myGrid1", "300", "200", "0", "1");
      myGrid.setXMLUrl("Data.xml");
      myGrid.render("gridDiv");
    </script>
  </body>
</html>

我們首先渲染了圖表然后渲染了網格。它們的dataURL都提供了Data.xml，讓網格與圖表本身關聯。

當你查看頁面時，你會看到如下輸出：

網格,圖表

為網格提供參數

除了XML/JSON中配置的參數，你也可以用FlashVars為網格配置一些參數。下面這個例子，將網格中的數據以百分比代替數值顯示。我們還可以讓網格中的顏色塊和導航按鈕顯示出陰影，示例代碼如下：

<html>
  <head>
    <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
  </head>
  <body bgcolor="#ffffff">
    <div id="griddiv" align="center">The grid will appear within this DIV.</div>
    <script type="text/javascript">
        var myGrid = new FusionCharts("../FusionCharts/SSGrid.swf", "myGrid1", "300", "200", "0", "1");
        myGrid.setXMLUrl("Data.xml");
        //Set Grid specific parameters
        myGrid.configure('showPercentValues', '1');
        myGrid.configure('showShadow', '1');
        myGrid.render("griddiv");
    </script>
  </body>
</html>

在上面這段代碼中，添加了兩個新的參數showPercentValues 和 showShadow，我們設置1作為兩個參數的值。

注：以前的 addVariable() 函數已經棄用，現在推薦用 configure() 函數。

網格效果如圖所示：

網格,參數,FusionCharts