在extjs中的折线图中,在项目中遇到一个问题,是这样的:
现在有多组数据,格式如下:(此处x轴位time,y轴位data1,2,3)
time | data1 | data2 | data3 |
8:00 | 12 | 无效 | 71 |
8:05 | 无效 | 5 | 无效 |
9:00 | 44 | 无效 | 无效 |
12:00 | 无效 | 34 | 无效 |
13:00 | 38 | 无效 | 22 |
但是实际的数据会出现这么一种情况,如上图所示.。也就是说,有些x坐标并不存在数据,但是却需要对有数据的地方画出来折线图,那么怎么办呢?
我查看了Ext.chart.series.Line类的源代码,主要关注drawSeries 方法,在里面我找到这么一段:
// Extract all x and y values from the store
//从store中提取出所有的x和y的值
for (i = 0, ln = data.length; i < ln; i++) {
record = data[i];
xValue = record.get(me.xField);
//时间类型,而值是字符串,强转为时间
if (xAxisType == 'Time' && typeof xValue == "string") {
xValue = Date.parse(xValue);
}
// Ensure a value---确定值
//&&比||优先级高,!永远返回的是布尔类型
//值是字符串或者不是日期,或者轴存在而且是Category类型的
if (typeof xValue == 'string' || typeof xValue == 'object' && !Ext.isDate(xValue)
//set as uniform distribution if the axis is a category axis.
//如果是一个category轴,设置连接
|| boundXAxis && chartAxes.get(boundXAxis) && chartAxes.get(boundXAxis).type == 'Category') {
if (xValue in xValueMap) {//如果xValue存在于xValueMap中
xValue = xValueMap[xValue];
} else {//否则,设置为i
xValue = xValueMap[xValue] = i;
}
}
// Filter out values that don't fit within the pan/zoom buffer area
//过滤值不符合的平移/缩放在缓冲区
yValue = record.get(me.yField);
if (yAxisType == 'Time' && typeof yValue == "string") {
yValue = Date.parse(yValue);
}
//skip undefined values
//跳过未定义的值
if (typeof yValue == 'undefined' || (typeof yValue == 'string' && !yValue) || (typeof yValue == 'number' && yValue > 1000 )) {
//<debug warn>
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.warn("[Ext.chart.series.Line] Skipping a store element with an undefined value at ", record, xValue, yValue);
}
//</debug>
continue;
}
// Ensure a value
if (typeof yValue == 'string' || typeof yValue == 'object' && !Ext.isDate(yValue)
//set as uniform distribution if the axis is a category axis.
|| boundYAxis && chartAxes.get(boundYAxis) && chartAxes.get(boundYAxis).type == 'Category') {
yValue = i;
}
storeIndices.push(i);
xValues.push(xValue);
yValues.push(yValue);
}
其中关注//跳过未定义的值一节,sencha的代码还是考虑得很周全滴。。。
因为我的数据data1,2,3都是number,而且进入model后,如果不存在值则会变成NaN,也不会变成undefined,所以不能满足跳过的条件,此处我为其添加了默认值9999,也就是绝对超出我所需要的范围。也就是这个:(typeof yValue == 'number' && yValue > 1000 ) 。这样,就可以跳过,当然,那个警告可以注掉。。。
特别注意:一定要把这个类继承出来自己改。。。别在里面改。。。
请看效果:(上面是没有添加的,下面是添加了的)