2011-12-21 163 views
2

我在用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)解決了這些問題?

+0

雖然我同意的顯示情況不妙,你會怎麼指望空值顯示,如線差距?似乎奇怪的是null會是這樣的圖表中的有效值。 – 2011-12-21 20:55:29

+0

@bmoeskau「看起來很奇怪,在這樣的圖表中,null是一個有效值。」這是我的感覺。是希望它顯示爲一個差距。也就是說,圖的右上角的六個點(空值)不應該在那裏。 – Geronimo 2011-12-22 01:00:44

回答

7

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}

+0

謝謝Eric,**轉換:**解決了它。 ** useNull:**不起作用,看起來extjs折線圖顯示「null」或「NaN」數據,如上圖所示,但「undefined」數據不會顯示在折線圖上。 – Geronimo 2011-12-23 19:36:49

+0

我在執行時碰到的一個問題是,我必須在工作前刪除Ext.data.Model類型cast:** type:'int'**。這是因爲在轉換函數執行之前,類型轉換將null或空格轉換爲數字,並且直到我將其刪除之前它總是返回爲零。 – Geronimo 2011-12-23 19:38:27

+0

很高興我能夠幫助。現在我有一個明確的參考,下次遇到這種情況。 – Eric 2011-12-23 19:39:22