extjs 4 折线图渲染问题 [英] extjs 4 line chart rendering problems
问题描述
我在使用 extjs 呈现下面的折线图时遇到问题.具体来说,最后六个值为空,它们(正确)未显示在系列线上,但(错误地)为它们显示了一个标记点(见下图右上角).
I am having trouble with extjs rendering the line chart below. Specifically, the last six values are null which are (correctly) not shown on the series line but (incorrectly) have a marker dot displayed for them (see top right of the image below).
我从数据库中提取图形数据作为 json:
I am pulling the graph data from a database as 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 读取器会将它们转换为零,并且这些值在图表底部显示为零 有串联线,这比没有串联线的情况下将标记贴在天花板上更糟糕.
If I change the query to return these null values as blanks instead (''
) then the json reader converts them to zeros and the values display as zero along the bottom of the graph with a series line, which is worse then having the markers plastered to the ceiling without a series line.
我在 Ext.chart.Series
中找不到任何配置选项来隐藏图表上的空值.我也无法在 Ext.data.Store
中找到配置选项以将空白返回为空白而不是0".
I haven't been able to find any config option in Ext.chart.Series
to hide null values on the graph. Nor have I been able to find a config option in Ext.data.Store
to return blanks as blanks and not "0".
正在寻找其他解决方法.
Looking for some other workaround.
或者是否有人从库本身(ext-all.js)中解决了这些问题?
Or has anyone resolved these issues from within the library itself (ext-all.js)?
推荐答案
Ext.data.Field
下有一个名为 useNull
的配置选项.如果接收到的数据无法解析为数字,则使用 null
代替.截至目前,我不记得单独这样做是否可以解决问题,而且我记得曾经使用过类似这样的自定义转换函数:
There's a config option under Ext.data.Field
called useNull
. If the data received cannot be parsed into a number, null
will be used instead. As of right now I can't recall if that alone will fix the problem, and I have a memory of once using a custom convert function that went something like this:
convert: function(value){
if(typeof value !=== 'number') // or other similar conversion
return undefined;
return value;
}
如果这不起作用,您可能需要自定义您的商店/阅读器以完全排除包含不需要的 null
值的记录.
If this doesn't work, you may need to customize your store/reader to completely exclude records containing the undesirable null
value.
编辑 - 使用 useNull
看起来像这样:{name: 'someName', type: 'int', useNull: true}
EDIT - Using useNull
looks like this: {name: 'someName', type: 'int', useNull: true}
这篇关于extjs 4 折线图渲染问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!