FusionCharts简单教程(八)-----使用网格组件
2013-09-02 19:44
337 查看
有时候我们会觉得使用图像不够直接,对于数据的显示没有表格那样直接明了。所以这里就介绍如何使用网格组件、将网格与图像结合起来。网格组件能够将FusionCharts中的单序列数据以列表的形式展示出来,同时也能够与单序列的图表进行一个不错的结合,形成一个不错的组合。
然后是单序列的数据文件。Data.xml
从上面可以看书其实创建网格组件与创建其他的图像是没有任何区别的,仅仅只需要跟换相应的SWF文件即可。
数据文件依然使用上面那个。
至于网格组件的参数设置我们可以在xml中数据文件中设置,详情请参考:FusionCharts简单教程(三)-----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简单教程(二)-----使用js加载图像和setDataXML()加载数据
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
- .Net Core学习教程之在Mvc中简单的使用日志组件
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
- Flash图表组件FusionCharts使用教程大全
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
- Python的Django中django-userena组件的简单使用教程
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
- FusionCharts简单教程(七)-----使用FusionCharts实现下钻功能
- 使用Python下的XSLT API进行web开发的简单教程
- YTK的简单使用教程
- Viper4Android使用教程-ViPER4Android简单设置手册
- OpenMP的简单使用教程
- 正则表达式简介及在C++11中的简单使用教程
- git+github的使用-最简单的入门教程
- 2.如何使用cocos2d来做一个简单的iphone游戏教程(第一部分)
- github简单使用教程
- SVN四部曲之SVN简单使用教程入门
- FusionCharts使用教程:为图表添加向下钻取链接