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>
?
?