Flash图表组件FusionCharts帮助文档九：网格组件用法-控件新闻-慧都网

Flash图表组件FusionCharts帮助文档九：网格组件用法

原创|其它|编辑：郝浩|2012-11-21 14:26:14.000|阅读 1944 次

概述：本文介绍了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