Flash图表组件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>
当你查看这个页面时，你会看到如下输出：
在网格中插入图表
网格图表就类似于使用了两个图表类型，唯一的区别就是网格和图表使用的是同一个数据源，而不是两个不同的数据源。请看下面这段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() 函数。
网格效果如图所示：
