有时候我们会觉得使用图像不够直接，对于数据的显示没有表格那样直接明了。所以这里就介绍如何使用网格组件、将网格与图像结合起来。网格组件能够将FusionCharts中的单序列数据以列表的形式展示出来，同时也能够与单序列的图表进行一个不错的结合，形成一个不错的组合。

一、 创建网格

        首先我们需要创建一个带有网格的页面，其实这个页面和创建图表的页面毫无区别，只不过是需要改变SWF文件即可。网格组件的SWF文件为：SSGrid.swf。

<body bgcolor="#ffffff">

        <div id="chartdiv_01" align="center"></div>

        <script type="text/javascript">

                var myChart = new FusionCharts("../FusionCharts/SSGrid.swf", "myChartId_01", "300", "200");

            myChart.setDataURL("Data.xml");

            myChart.render("chartdiv_01");

        </script>

    </body>

        然后是单序列的数据文件。Data.xml

<chart caption='Decline in Net Interest Margins of Banks (1995-2005)'>

    <set label='Spain' value='26' color='F6BD0F'/>

    <set label='Germany' value='25' color='FF6600'/>

    <set label='France' value='36' color='8BBA00'/>

    <set label='Italy' value='22' color='F984A1'/>

    <set label='Holland' value='44' color='A66EDD'/>

    <set label='Denmark' value='36' color='B2FF66'/>

    <set label='Sweden' value='44' color='AFD8F8'/>

</chart>

        从上面可以看书其实创建网格组件与创建其他的图像是没有任何区别的，仅仅只需要跟换相应的SWF文件即可。

二、 与图像组合使用

        网格组件与图像的组合是一个比较好的组合方式。至于使用我们可以理解成是使用了两个不同的图像罢了，只不过他们公用一个相同的数据文件，而不是两个不同的数据文件。如下：

<body bgcolor="#ffffff">

        <div id="chartdiv_01" align="center"></div>

        <script type="text/javascript">

                var myChart1 = new FusionCharts("../FusionCharts/SSGrid.swf", "myChartId_01", "300", "200");

            myChart1.setDataURL("Data.xml");

            myChart1.render("chartdiv_01");

        </script>

        <div id="chartdiv_02" align="center"></div>

        <script type="text/javascript">

                var myChart2 = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId_02", "400", "300");

            myChart2.setDataURL("Data.xml");

            myChart2.render("chartdiv_02");

        </script>

    </body>

        数据文件依然使用上面那个。

        至于网格组件的参数设置我们可以在xml中数据文件中设置，详情请参考：FusionCharts简单教程(三)-----FusionCharts的基本属性

FusionCharts简单教程(八)-----使用网格组件的更多相关文章

  1. FusionCharts简单教程(三)-----如何自定义图表上的工具提示

    最近有蛮多人总是问我这个FusionCharts制表的问题,帮助他们解决之后,在昨晚发现以前整理的笔记中有这个简单教程,而且以前也发表了几篇这个博文,所以就将其全部上传上来供别人参考.如有不正确之处望 ...

  2. FusionCharts简单教程(七)-----使用FusionCharts实现下钻功能

          前面介绍的FusionCharts都是对FusionCharts的基本属性进行操作,下面几篇博文就FusionCharts的高级特性做一个介绍,包括:添加下钻链接.使用Style样式定制图 ...

  3. FusionCharts简单教程（一）---建立第一个FusionCharts图形

    由于项目需求需要做一个报表,选择FusionCharts作为工具使用.由于以前没有接触过报表,网上也没有比较详细的fusionCharts教程,所以决定好好研究FusionCharts,同时做一个比较 ...

  4. FusionCharts简单教程---建立第一个FusionCharts图形

    由于项目需求需要做一个报表,选择FusionCharts作为工具使用.由于以前没有接触过报表,网上也没有比较详细的fusionCharts教程,所以决定好好研究FusionCharts,同时做一个比较 ...

  5. FusionCharts简单教程(三)-----FusionCharts的基本属性

          通过前面两章的讲解我们可以制作出简单的图像,但是有时候我们需要对图像进行一个精确的规划,比如设置背景颜色.设置提示信息.设置间隔颜色等等,这时就需要我们对FusionCharts的细节有比 ...

  6. FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据

          前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...

  7. FusionCharts简单教程（五）-----FusionCharts中的那些特殊符号

           在FusionCharts中有些特殊字符,我们需要进行编码操作才能够使用,否则就无法正常显示. 欧元符号       在FusionCharts里显示"€",你需要用 ...

  8. FusionCharts简单教程(六)------加载外部Logo

    一.加载外部文件Logo       在使用FusionCharts时,我们可能需要在加载图像的时候需要在图表中显示标识.图片等等.这里我们可以使用logoURL属性来实现.如: <chart ...

  9. FusionCharts简单教程(六)-----如何自定义图表上的工具提示

          所谓图表上的工具提示就是当鼠标放在某个特定的数据块上时所显示的提示信息.如下: 禁用显示工具提示       在默认情况下工具提示功能是显示的,但是有时候我们并不是很想需要这个功能提示功能 ...

随机推荐

  1. INI配置文件分析小例子

    随手写个解析INI配置字符串的小例子 带测试 #include <iostream> #include <map> #include <string> #inclu ...

  2. DOCTYPE的详细图解

    之前有一次写代码的时候忘记写了<!DOCTYPE html> 导致样式的效果一直有点问题,查了很久才发现时候这个的锅.之后自己详细的来查找了DOCTYPE的作用. 在目前,基本上都是采用浏 ...

  3. XMLHttpRequest cannot load file:///E:/userdialog.html?_=1465888805734. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-reso

    做前端写静态页面时,采用的是jq easyui框架 在ie与webkit总是加载的时候总是在loading... 而firefox却是正常加载的,总以为是代码写错了, 经过再三的检查以及百度查找,确认 ...

  4. 编译运行java程序出现Exception in thread "main" java.lang.UnsupportedClassVersionError: M : Unsupported major.minor version 51.0

    用javac编译了一个M.java文件, 然后用java M执行,可是出现了下面这个错误. Exception in thread "main" java.lang.Unsuppo ...

  5. 进阶——scrapy登录豆瓣解决cookie传递问题并爬取用户参加过的同城活动©seven_clear

    最近在用scrapy重写以前的爬虫,由于豆瓣的某些信息要登录后才有权限查看,故要实现登录功能.豆瓣登录偶尔需要输入验证码,这个在以前写的爬虫里解决了验证码的问题,所以只要搞清楚scrapy怎么提交表单 ...

  6. 查找原始MySQL死锁ID

    转载地址:http://yueliangdao0608.blog.51cto.com/397025/1180917 如果遇到死锁了,怎么解决呢?找到原始的锁ID,然后KILL掉一直持有的那个线程就可以 ...

  7. CodeForces 742B Arpa’s obvious problem and Mehrdad’s terrible solution (暴力枚举)

    题意:求定 n 个数,求有多少对数满足,ai^bi = x. 析:暴力枚举就行,n的复杂度. 代码如下: #pragma comment(linker, "/STACK:1024000000 ...

  8. 黑马程序员－c语言－类型强制转换

    强制转换的条件: 1.当所声明的类型不能满足所符值的变量时,需要转换声明的类型,以便能够存储变量. 例如:short存储的最大值为32767,但是所要符值大于32767时,short类型不符合,需要转 ...

  9. 初探Lambda表达式

    简单例子 Expression<Func<; 了解Net方法,没有比IL来得更加容易.反编译IL代码如下(截取部分显示) [] <<int32, bool>> ex ...

  10. Entity Framework EF6使用 MySql创建数据库异常解决办法

    EF6使用MySQL数据库时,第一次创建数据库出现“Specified key was too long; max key length is 767 bytes”错误,解决办法请见以下连接. htt ...