ExtJS(5)- Ext5的统计图Chart

    今天系统整理下Ext5中的chart使用以及遇到的一些问题。


    首先是Ext5中chart的引用,在5之前的版本中chart的api会被集合在ext-all.js中,但是在5当中并不是这样,如果只引入ext-all.js,我们引用chart API时将无法找到,我们还需要引入以下js

<script type="text/javascript" src="ext-5.0.0/build/packages/ext-charts/build/ext-charts.js"></script>


    成功引入API以后,我们来生成各种chart看看,5的调用API较之4也有挺大的改动,具体调用我们可以直接参考官方的示例


    接下来,我们来说一下我遇到的问题,我们先以Line Chart(Marked)为例,首先我们看一下官方的例子:

    这个图我们按官方示例代码运行也能得出一样的,但是当我们点击右边的legend,我们这边的显示便出现了异常:

    以下官方示例图

    以下我们的实验图

    我们发现在我们点击"Firefox"和"Chrome"时本应该隐藏的红线和蓝线并没有隐藏掉,且停留在了原位置,而绿线和黄线随着y轴的调整向上移动,这样停留的红蓝线与y轴就不对应。

    我们再看看其他的一些异常:

    这些柱状和线状都存在类似问题,在Ext4.2版本中都不存在这些问题,而5.0官方示例也不存在这些问题。但是官方示例所引用的API也并非与我们的一致,那么问题很可能就出在我们引入的ext-charts.js上,

或者说官方给出的这个ext-charts.js版本就有问题。

    对于这个问题,一来是积极研究官方示例中引入API的方式,二来是等待Ext5.0.1的推出,看看新版本中的API是否还存在该问题。


本文出自 “雪飘七月” 博客,请务必保留此出处http://xuepiaoqiyue.blog.51cto.com/4391594/1591308

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。