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折線圖渲染問題

回答

相關問題