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