解决extjs使用chart设置category未定义

本文主要是解决extjs使用chart设置category未定义的问题。

定义一个json对象,注意其中的数据类型都是字符串。

var data = [{
name : ‘Jan’,
value : ’20’
}, {
name : ‘Feb’,
value : ’25’
}];

定义store,此处没有指定数据类型,而这样会带来潜在的问题,后面就可以看到。

var store = Ext.create(‘Ext.data.Store’, {
fields : [‘name’, ‘value’],
data : data
});

创建一个chart,此处设置为category并使用line折线类型。注意此处的数据类型为numeric。

放到Ext.onReady(function() {});里就可以看到效果了。

从图中可以看到,虽然图表画出来了,但是y轴的坐标是错误的。这就是前面data以及store中数据类型与chart中要求的数据不统一造成的。

不是说js若类型吗,但那也是有类型的。所以需要对data或者store中的数据类型进行一下预处理,以满足chart的需要。

store在初始化的时候就提供了数据类型的设置,可以自动完成类型的转换。

var store = Ext.create(‘Ext.data.Store’, {
fields : [{
name : ‘name’,
type : ‘string’
}, {
name : ‘value’,
type : ‘int’
}],
data : data
});

经过这样修改后,如图显示正常了。但是下面的问题才是本文的重点。

假如现在data中只有一条数据:

var data = [{
name : ‘Jan’,
value : ’20’
}];

来看看extjs给我们的效果吧:

天哪,怎么这个样子啊,只有一个点折线自然是没有了,就这一个点也不知道跑到哪里了,似乎在左上角的地方。而且还有一个undefined,真是丑陋无比,在注重用户体验的今天这是无法容忍的。

好吧,那我们自己增加两个端点,让烦人的undefined见鬼去吧。

if (data.length === 1) {
data.push({
name : ‘after’
});
data.splice(0, 0, {
name : ‘before’
});
}

来看看效果,有了点进步,但是依然不理想。端点应该只是体现在x轴的标签上,折线就免了,因为两边不一定也不应该是0,理想的效果是,只显示原来的一个点,不需要有线。

经过了一番摸索,终于找到了解决的办法。对于data中的数据进行处理,将字符串类型的数据转换为数值型。

for (i in data) {
data[i].value = parseInt(data[i].value);
}

对于store依然保持原始的定义方式

var store = Ext.create(‘Ext.data.Store’, {
fields : [‘name’, ‘value’],
data : data
});

最终的效果,这下看上去舒服多了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据