ExtJS(5)- Ext5的统计图Chart

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


    首先是Ext5中chart的引用,在5以前的版本中chart的api会被集合在ext-all.js中,可是在5当中并非这样,若是只引入ext-all.js,咱们引用chart API时将没法找到,咱们还须要引入如下jsjava

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


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


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

wKioL1×××1Xg6KJkAAGfrwTB-cA404.jpg

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

    如下官方示例图
3d

wKioL1SSSAahURwYAAFasgBpKe8715.jpg

    如下咱们的实验图
blog

wKiom1×××4vAZOVdAAGtnT87vsk511.jpg    咱们发如今咱们点击"Firefox"和"Chrome"时本应该隐藏的红线和蓝线并无隐藏掉,且停留在了原位置,而绿线和黄线随着y轴的调整向上移动,这样停留的红蓝线与y轴就不对应。ip

    咱们再看看其余的一些异常:
get

wKioL1SSSxWBgzNNAAGnNlt47bA410.jpg

wKiom1SSSnOjRSWlAAF7V_cVyDQ574.jpg

wKioL1SSSxXAHkyBAAFUzDztglM787.jpg

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

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

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

相关文章
相关标签/搜索