首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Funsion Charts简略示例

2012-10-23 
Funsion Charts简单示例最近在研究一个关于报表的插件,它叫Fusion Charts。我个人认为还是挺好用的啊。下面

Funsion Charts简单示例

最近在研究一个关于报表的插件,它叫Fusion Charts。我个人认为还是挺好用的啊。下面我们简单的看一个示例程序。我们做一些直方图,从而显式每个月的销售情况

首先, 将下载好的Fusion目录中的Charts目录放置到应用中

其次, 在显式的JSP页面中导入FusionCharts.js

<script type="text/javascript" src="<%=path %>/Charts/FusionCharts.js"></script>

再次, 创建要展现数据的XML文件 Data.xml

<graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='销售额' showNames='1' decimalPrecision='0' formatNumberScale='0'>
????? <set name='一月' value='462'? color='AFD8F8'/>
????? <set name='二月' value='857'? color='f6bd0f'/>
????? <set name='三月' value='671'? color='8bba00'/>
????? <set name='四月' value='494'? color='ff8e46'/>
????? <set name='五月' value='761'? color='008e8e'/>
????? <set name='六月' value='960'? color='d64646'/>
????? <set name='七月' value='629'? color='8e468e'/>
????? <set name='八月' value='622'? color='588526'/>
????? <set name='九月' value='376'? color='b3aa00'/>
????? <set name='十月' value='494'? color='008ed6'/>
????? <set name='十一月' value='761'? color='9e080d'/>
????? <set name='十二月' value='960'? color='a186b1'/>
</graph>

最好,现在我们要做展现的事情了

<body>
? 下面是展示的报表
? <div id="chartid"></div>
??? <script type="text/javascript">
??? ??? var myChart = new FusionCharts("Charts/Column3D.swf","myChartID","600","500");
??? ??? myChart.setDataURL('Data.xml');
??? ??? myChart.render("chartid");
??? </script>
? </body>

?

?

热点排行