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

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

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



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
FusionCharts XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat