使用Ext创建多柱、折线统计图（动态加载数据）

最新推荐文章于 2021-05-21 16:45:41 发布

原创

最新推荐文章于 2021-05-21 16:45:41 发布 · 588 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Ext #多柱统计图 #折线统计图

本文介绍了如何使用ExtJS创建多柱和折线统计图，包括遇到的问题及解决方法，如柱状图不显示、负值显示、起点为0等问题，并强调在构建JSON数据时，数字不应包含引号，图例命名可通过yField后的title属性定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近一个项目里面要用统计图，我对统计图就FreeChart知道一点，对于Ext，是一点都不会。只能边学表做，边做边学吧。

先看效果图：

这个一个根据客户类型查询出来的关于合同金额的统计图，比较简单。类型只有两种，柱也只有三个（这个不重要）

需要用到的主要的Java代码：

Action代码（SQL语句随便写）：

SView view= (SView) dao.get(SView.class, new Integer(viewID));
if(view==null)throw new Exception(" can not find view entity by viewid, if viewid="+viewID);
String sql=view.getSelectcondition();
String datas=dao.findBySQL(sql);
req.setAttribute("datas",datas);
req.getRequestDispatcher(path).forward(req, res);

DAO代码：

/**
* 获取 
* @param cls
* @param id
* @return
*/
public Object get(Class cls,Serializable id){
 try {
	return getHibernateTemplate().get(cls,id);
     } catch (RuntimeException re) {
	throw re;
     }
}

/***
* 根据原生 SQL查询
 * @param sql
 * @return
*/
public String  findBySQL(final String sql) {
	try {
		String restr="[";
		List<Object [] > result = (List<Object [] > ) getHibernateTemplate().execute(new HibernateCallback() {
			public Object doInHibernate(Session arg0) throws HibernateException,SQLException {
					return arg0.createSQLQuery(sql).list();
				}
			});
		for (int i = 0; i < result.size(); i++) {
			Object [] objs=  result.get(i);
			if(i!=0)restr+=",";
			restr+="{";
			for (int j = 0; j < objs.length; j++) {
				if(j!=0)restr+=",";
				//restr+="'field"+j+"\":\""+objs[j]+"\"";
				if(NumberUtils.isNumber(objs[j].toString())){
					restr+="'field"+j+"':"+objs[j]+"";
				}else{
					restr+="'field"+j+"':'"+objs[j]+"'";
				}
			}
			restr+="}";
		}
		restr+="]";
		return restr;
	} catch (RuntimeException re) {
		    throw re;
	}

}

页面上主要的JS代码：