在ExtJS 4 LiveAnimated.html 例子中,动态绘制了曲线图,很是漂亮,例子中是用前端javascript生成的测试数据来绘图,如果用ajax的方式从后台取数据去绘图,出现了曲线无法绘制(坐标轴已绘制)的问题,结果如下:
代码如下:
分析代码,没有发现缺陷,但一直无法绘制曲线,后来跟踪代码到 Ext.chart.axis.Time中,发现了问题所在:Ext在绘制图形时,先绘制了Time时间轴。绘制时间轴时,首先为chart对象创建了substore,它与store的结构一样,先看看drawSeries这个函数的代码(Ext.chart.series.Line)
从代码中可以看出drawSeries使用的数据源是chart.substore和chart.store “逻辑或”,逻辑或的结果是“第一个不为空就是第一个,第一个为空就是第二个”,而此时的substore不为null,因此绘制曲线的数据源也是substore,而substore的数据与时间轴的刻度一一对应,constrainDates( Ext.chart.axis.Time)函数中生成了substore的数据,从下面的代码可以看出,其数据来源与store有关。
时间轴可以绘制出来,但曲线就是不能绘制出来,经过查找,发现substore中的usedMemory的值全部为false,此为问题所在。上面的代码是从store中查找date字段,如果2个时间相等,则将rec的数据返回给substore。
关注for循环中的else if 部分,发现没有任何两个时间相等,所以substore中的usedMemory的值全部为false。ajax返回的数据格式为{"usedMemory":163576,"date":"2011 05 31 22:11:02"} ,不相等的原因在于nowtime中含有微秒值,而ajax返回值中无微秒值,所以 else if (+recDate == +date) 永远不成立,找到问题所在后,解决十分简单,将nowtime中的微秒值去除,可以使用nowTime.setMilliseconds(0);
经验:时间值的比较可以采用如下方式:
date = new Date();
+date操作可直接将date转换为int值,两个Date类型的比较,一定要注意精度(秒、微秒)!