今天系统整理下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是否还存在该问题。
时间: 2024-10-26 23:16:06