extjs4.2中的图表 line sery折线图跨过某些点的方法

在extjs中的折线图中,在项目中遇到一个问题,是这样的:

现在有多组数据,格式如下:(此处x轴位time,y轴位data1,2,3)



timedata1data2data3
8:0012无效71
8:05无效5无效
9:0044无效无效
12:00无效34无效
13:0038无效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 ) 。这样,就可以跳过,当然,那个警告可以注掉。。。

特别注意:一定要把这个类继承出来自己改。。。别在里面改。。。

请看效果:(上面是没有添加的,下面是添加了的)



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值