最近在研究一个关于报表的插件,它叫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>