最近的一个项目需要使用统计图表。 我对 FreeChart 了解一点有关统计图表的知识，但对 Ext 则一无所知。 只有边做边学，边做边学。
先看效果图：
这是按客户类型查询的协议金额的统计图，比较简单。 只有两种类型，只有三列（这个不重要）
需要用到的主要Java代码：
动作代码（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页面主要JS代码：
1.需要导入的JS和CSS文件：
<script type="text/javascript" src="/js/jquery-1.4.2.js"> <link rel="stylesheet" href="/EChart/lib/style.css" type="text/css"> <link rel="stylesheet" href="/EChart/extlib/resources/css/ext-all.css" type="text/css"> <script type="text/javascript" src="/EChart/extlib/ext-all.js">
2.Ext JS（具体配置见官网）：
Ext.require('Ext.chart.*');
Ext.require([ 'Ext.layout.container.Fit', 'Ext.data.JsonStore' ]);
Ext.onReady(function() {
var store1= Ext.create('Ext.data.JsonStore', {
fields: ['field0', 'field1', 'field2', 'field3','field4'],//自选需要几个就写几个
data: ${datas}
//其中，data的JSON串是这个样子的：
//[{'field0':'国企','field1':3,'field2':1000500.0,'field3':220000.0,'field4':780000.0},{'field0':'私企','field1':1,'field2':100000.0,'field3':5000.0,'field4':95000.0}]
});
Ext.create('Ext.chart.Chart', {
renderTo: "main1",//显示的位置，我这里放在了ID为“main1”的DIV里，默认的是在body里面(Ext.getBody())
width: '95%',
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: '${view.viewname}',
autoShow: true,
layout: 'fit',
style: 'background:#fff',
animate: true, //动画
shadow: true, //阴影
store: store1, //##
legend: { //图例：默认为false，不显示
position: 'right' //显示位置有四个：top、bottom、left、right
},
axes: [
//左边纵坐标配置
{
type: 'Numeric', //显示图形类型
position: 'left', //显示位置
fields: ['field2', 'field3','field4'],
minimum: 0, //如果小于这个数，图标向下（相当于设置了一个起始点）
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
title: '${view.viewcomment}'//左边纵坐标的标题
},
//右边纵坐标配置
{
type: 'Numeric', //显示图形类型
position: 'right',//显示位置
fields: ['field1'],
minimum: 0, //如果小于这个数，图标向下（相当于设置了一个起始点）
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
title: '合同数量'//右边纵坐标的标题
},
//横坐标配置
{
type: 'Category',
position: 'bottom',//显示位置
fields: ['field0'],
title: '${view.viewdescript}'
}],
series: [
{
type: 'column',//统计图类型：柱状图
axis: 'left',
highlight : true,//高亮显示（鼠标移动到上面时，高亮显示）
label : {//显示柱上面的数字，并设置样式
display : 'insideEnd','text-anchor' : 'middle',
field : ['field2', 'field3','field4'],//柱上显示的数字，一一对应
renderer : Ext.util.Format.numberRenderer('0'),
orientation : 'vertical',
color : '#333'
},
listeners : {//监听，点击时触发的事件
"itemclick" : function(storeItem) {//点击时alert出横坐标的值(或者跳转到指定的页面)
alert(storeItem.storeItem.get('field0'));
}
},
xField: 'field0',
yField: ['field2', 'field3','field4'],
title:['合同金额','已收金额','未收金额']//自定义的图例名称
},
{
type: 'line',//折线
axis: 'right',
highlight : true,
label : {//显示柱上面的数字，并设置样式
display : 'insideEnd','text-anchor' : 'middle',
field : ['field1'],
renderer : Ext.util.Format.numberRenderer('0'),
orientation : 'vertical',
color : '#333'
},
listeners : {//点击时alert出横坐标的值(或者跳转到指定的页面)
"itemclick" : function(storeItem) {
alert(storeItem.storeItem.get('field0'));
}
}, markerConfig: {
type: 'circle',//折线图“点”的样式
size: 4,
radius: 4,
'stroke-width': 0
},
xField: 'field0',
yField: ['field1'],
title:'合同数量'//自定义的图例名称
}
]
});
});
效果已经下来了，需要说明的点是我在做这个过程中遇到的几个令人头疼的问题：
1、如果不显示直方图，则显示折线图；
2、折线图中有一个点在横坐标下方（类似正数的情况）；
网上搜了一下这些情况，得到的答案是：值为null，则不会显示，折线图如果缺失则按0处理。 但显然，我不是这两种情况（我警报了传递的json字符串并且有数据）。 如果数据没有问题，那么可能是结构或类型问题。 我检查了结构，这是一个正常的 JSON 结构，是的。 检查类型。 既然不知道是哪些类型，那就去官网找例子看看类型。 都是用静态数据演示，数据类型一目了然：数值型（都是数字，统计图表肯定是数字，不然就失去了统计意义，只是为了得到几个数字） 。 回去查看一下我的JSON字符串([{'field0":"国有企业",'field1":"3",'field2":"1000500.0",'field3":"220000.0",'field4":" 780000.0"} ,{'field0":"私营企业",'field1":"1",'field2":"100000.0",'field3":"5000.0",'field4":"95000.0"}]), 全部由双引号引起来的，无论是数字还是名字。 于是我改了一下，去掉了数字的双引号（即代码中的数字判断：NumberUtils.isNumber(objs[j].toString())，我知道这个方法已经过时了），并进行了测试问题仍然存在。 我粘贴了官网的静态数据，没问题。 那我一定是漏掉了数据中的一些东西，然后我又发现别人的名字用的是单冒号，而我也用的是双冒号。 我将其更改为单个冒号，并再次测试。
所以，总结一下：Ext数据库中拼接JSON字符串时，数字不要使用冒号（奇数、偶数都不要使用），非数字使用单冒号。 不管能不能治病，都治不了死人。
3、折线图第一个点为0，第二个点为正常（为1）；
4、总有一个点在0（即折线图是从0开始的，即使我的点的数据小于0）；
上述问题已经解决。 显示统计图表，不再出现在横坐标下方。 但是第一个点始终是0，但是它的数据明明是3。我把数据库机房改成了官网测试数据。 哎，它居然还有从0开始的一列，我改了其他数据，发现“真卿”这一列不是0，但是总有一列是0。，奇怪了。 于是我查了又查，发现折线图的轴位置是：'bottom'，横坐标也是bottom。 按道理来说，我应该让它按照左边的坐标来显示css统计图，而不是像横坐标那样。 所以我改成了right，即：position: 'right'。 刷新后就正常了。 替换为官网静态数据。 不管怎么改，都不再从0开始了（测试数据都是小于0的数据）。
小结：设置折线图纵坐标位置时，一定不要设置为底部，否则会从底部位置开始。
5.图例问题
效果图：
我的 yFields 都是 field1、field2、field3 和 field4。 图例就是按照这个取的，自然是field1/2/3。 如果不显示图例，谁知道图表上的三个条和两个点代表什么。 显示出来，不仅是写这些field1、field2、field3的人，连其他人也不知道他们是谁。 于是就想着改ext的JScss统计图，怎么改，不知道，搜索一下。 我发现了一篇类似的文章，也改了图例（链接：），但是是英文写的，看不懂。 我用谷歌翻译。 不知道微软是不是要加入台湾什么的，就是打不开。 我终于打开了一次，但由于某种原因我的 Maxthon 死机了。 当我再次打开它时，我无法连接到它。 不可能。 我只能认真看看。 我差不多猜到了，我也有意见了。 我打算更改 ext.all.js。 当我打开它时，我的IDE直接挂了。 检查属性，发现有2M多了，太大了，而且所有代码还是写在一行里。 你必须先投反对票。 网上找了一个JS低格式化工具，格式化了一下。 结构看起来很不错，所以我想我可以做到。 然而统计图一运行就报错，统计图根本打不开。 不低还不够吗？ 我又改回来，又看到了统计图。 这么长的一行代码（格式化后超过9万行）要找到我想要的图例并不容易。 我一打开IDE就不得不挂掉它。 最后我打不开了，就复制粘贴了。 这东西，IDE也得摆。 即使更换了显存后，问题依然存在，并且我尝试了几次的代码都丢失了。 我的配置不低，是I5，虚拟内存设置为1024，还不错。 嘿，如果有一个单独的 ext 图表的 js 包就好了，至少肯定不会那么大（也许它已经存在，但我还不知道）。
更改ext的JS失败，于是我又想到了一个技巧：直接用汉字替换field1、field2、field3。 显示时，用汉字进行检查。 我们去总部吧。 尝试了一下果然有效，和我刚才的效果是一样的。
虽然效果有所改善，但我还是觉得不是很好。 然后我就上网搜索，这次搜索的是：extjs4.0图表图例（之前搜索的都是英文，这次我也尝试一下中文），找到了一个。 本文与它()无关，主要讲Ext的使用。 读完之后，基本看懂了，但是很无聊。 刚刚看了下面的评论，看到有人问我这个问题（看来这个问题困惑的不止我一个，哈哈），我看到了回复，哈哈，有结果了：在前面加个标题yField，如上面代码：title:['合同金额','已收到金额','未收到金额']，如果只写一个标题：['合同金额']，那么三列的图例名称都是‘合同金额’（不信你可以试试），（上面有回复就是这个链接：我点进去看了一下。直到最后一行才找到我要找的东西） 。
这个Ext确实不简单，或者是我太笨了！ 嘿，慢慢来！
