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".

寻找其他解决方法。

或者有人从库中解决了这些问题（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.

EDIT - 使用 useNull 看起来像这样： {name：'someName'，type：'int'，useNull：true}

EDIT - Using useNull looks like this: {name: 'someName', type: 'int', useNull: true}

这篇关于extjs 4线图呈现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！