早川赖里奈,加勒比久久综合,人人草人

Flash圖表組件FusionCharts幫助文檔九：網(wǎng)格組件用法

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

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

相關(guān)鏈接：

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

創(chuàng)建網(wǎng)格

首先，我們創(chuàng)建一個帶有網(wǎng)格（沒有圖表）的基本頁面。先創(chuàng)建一個新的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>

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

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

當(dāng)你查看這個頁面時，你會看到如下輸出：

網(wǎng)格,FusionCharts

在網(wǎng)格中插入圖表

網(wǎng)格圖表就類似于使用了兩個圖表類型，唯一的區(qū)別就是網(wǎng)格和圖表使用的是同一個數(shù)據(jù)源，而不是兩個不同的數(shù)據(jù)源。請看下面這段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>

我們首先渲染了圖表然后渲染了網(wǎng)格。它們的dataURL都提供了Data.xml，讓網(wǎng)格與圖表本身關(guān)聯(lián)。

當(dāng)你查看頁面時，你會看到如下輸出：

網(wǎng)格,圖表

為網(wǎng)格提供參數(shù)

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

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

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

注：以前的 addVariable() 函數(shù)已經(jīng)棄用，現(xiàn)在推薦用 configure() 函數(shù)。

網(wǎng)格效果如圖所示：

網(wǎng)格,參數(shù),FusionCharts