通用图表显示代码（支持饼图、线图和柱状图）

kongshanxuelin

浏览: 913841 次
性别:
来自: 宁波

最近访客更多访客>>

norrain

wangenbao1

akingde

newer_fisher

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

核心代码片段

SQL jfreechart Hibernate JavaScript XML

在我们开发Web程序中，免不了有些统计分析的数据需要用图表展现，如饼图，线图等，以前我们经常用JFreeChart在后台生成临时png的图片来完成这项工作，这种处理方式往往会存在大量的冗余代码，为什么不用js来生成这些图表数据呢？动手吧，首先就得支持统计语句的高度可配置型，这个就交给hibernate去解决吧，整合完成之后，后台XML配置文件如下：

<!--多么复杂的统计语句都可以写在这里，注意第1个字段代码X轴，第2个字段代码Y轴-->	
<sql-query name="stat_test">
  <![CDATA[
  	select f1,sum(*) from tbl group by c1
  ]]>
	
</sql-query>		
	
<sql-query name="stat_test2">
  <![CDATA[
  	select f1,avg(*) from tbl where f1 like ?
  ]]>
</sql-query>

如果你要在页面中生成线图，只需要在页面中</body>标签之前引入js文件：

<script id="faqee_chart_script" src="http://............./chart/chart.js?type=line&id=tt"></script>

其中type表示图表类型，id表示页面中存放图表的DOM对象ID，一般为Div，最终页面的代码类似这样：

<script type="text/javascript">
function chartme(){
	FaqeeChartService.init();
                //注意这里的name值与您后台配置的XML文件相对应，arg表示传入SQL语句参数的值，chartname为这个曲线的名称，支持一个图表显示多条曲线
	var tt = "{name:['stat_test'],arg:[''],chartname:['测试一下']}";
	FaqeeChartService.chart(tt);
}
</script>

 <body><button onclick="chartme()">给我画图</button>
<div id="tt" style="width:600px;height:300px;"></div>

<script id="faqee_chart_script" src="http://............./chart/chart.js?type=line&id=tt"></script>
 </body>

最后的效果如下图：