extjs 4折线图渲染问题

我在用extjs渲染下面的折线图时遇到了问题。具体来说，最后六个值为空（系列行上未正确显示），但（错误地）显示了一个标记点（参见下图右上方）。extjs 4折线图渲染问题

line chart with bad rendering

我从一个数据库作为JSON拉图数据：

// data store fields 
Ext.define('Graphs', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     {name: 'the_quota',  type: 'int'}, 
     {name: 'count_pt_year', type: 'int'}, 
     {name: 'date_string', type: 'string'} 
    ] 
}); 

// get the graph data 
var graphStore = Ext.create('Ext.data.Store', { 
    model: 'Graphs', 
    proxy: { 
     type: 'ajax', 
     url: 'sqlRequest.jsp?queryName=events_getGraph', 
     timeout: 160000, 
     reader: 'json' 
    }, 
    autoLoad:false 
});

如果我更改查询作为空白返回这些空值，而不是（''），那么JSON读者将它们转换为零，并且沿着图的底部与一系列线的值显示为零，这更糟糕的是使标记粘贴到天花板而没有系列线。

我一直无法在Ext.chart.Series中找到任何配置选项来隐藏图表上的空值。我也无法在Ext.data.Store中找到配置选项将空白返回为空格而不是“0”。

寻找其他解决方法。

还是有人从库本身（ext-all.js）解决了这些问题？

来源

2011-12-21 Geronimo

虽然我同意的显示情况不妙，你会怎么指望空值显示，如线差距？似乎奇怪的是null会是这样的图表中的有效值。 – 2011-12-21 20:55:29

@bmoeskau“看起来很奇怪，在这样的图表中，null是一个有效值。”这是我的感觉。是希望它显示为一个差距。也就是说，图的右上角的六个点（空值）不应该在那里。 – Geronimo 2011-12-22 01:00:44

Ext.data.Field下有一个配置选项useNull。如果收到的数据不能被解析为数字，则将使用null。截至目前我不记得，如果单独将解决这个问题，我有一次用了一句这样的自定义转换功能的记忆：

convert: function(value){ 
    if(typeof value !=== 'number') // or other similar conversion 
     return undefined; 
    return value; 
}

如果这不起作用，你可能需要自定义您的商店/阅读器以完全排除包含不良null值的记录。

编辑 - 使用useNull看起来是这样的：{name: 'someName', type: 'int', useNull: true}

来源

2011-12-22 22:26:48 Eric

谢谢Eric，**转换：**解决了它。 ** useNull：**不起作用，看起来extjs折线图显示“null”或“NaN”数据，如上图所示，但“undefined”数据不会显示在折线图上。 – Geronimo 2011-12-23 19:36:49

我在执行时碰到的一个问题是，我必须在工作前删除Ext.data.Model类型cast：** type：'int'**。这是因为在转换函数执行之前，类型转换将null或空格转换为数字，并且直到我将其删除之前它总是返回为零。 – Geronimo 2011-12-23 19:38:27

很高兴我能够帮助。现在我有一个明确的参考，下次遇到这种情况。 – Eric 2011-12-23 19:39:22

extjs 4折线图渲染问题

回答

相关问题