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屋！