EXTJS動態重新整理chart的fields

extjs動態重新整理chart的fields

最近遇到乙個需求，chart要展示的曲線將來可能是曲線的條數，名字，資料什麼的都會改變，最主要的是要在同乙個chart處能夠通過下來選項框，選擇任意展示資料曲線（也許一開始可能覺得，那我定義多個chart，每個chart對應乙個下拉選項不就好了，但是，問題在於，現在下拉選項也是未來可能會動態增加的）

chart動態重新整理fields，實際上就是chart中繪製的多條線可能是不固定的，動態改變的，或者至少說是chart的每條線的對應的fields網域名稱是動態改變的。

簡單舉個例子，可能一般寫chart，都會定義縱座標橫左邊的fields，這樣方便從後台獲取得到json陣列時解析json物件屬於自己的內容方便。一般情況下沒有特殊需要都是在前台js處寫死的fields，但是如果某天你的需求會改變，你展示的線可能還是那幾條線，但是換了一組資料，名字啊，資料啊全改變了，這些資料是未知的，將來的改變，你現在是不知道的。那你要怎樣，才能在你原本的chart位置繪製出適應新資料的曲線圖表。

一般使用extjs建立chart使用如下方式：

var chart = ext.create('ext.chart.chart',,   
store: store,
axes: [, 
minorticksteps: 1,
minimum: 0,
maxmum: 100 
}, ],
series: [, 
axis: 'left',
xfield : 'name',
yfield : datafield,
smooth: true,
style: ,
markerconfig: ,
tips: 
} }]
});

如上建立乙個包含一條曲線的

chart

物件，把該

chart

物件加到某乙個

panel

中或者渲染到

html

中的某一

div中就能夠顯示出來了。但是，這裡明顯的

axes

中的fields

是寫死的，

chart

的store

雖然能動態重新整理資料，但是

store

的fields

一般也是寫死的，這樣就不好辦了。

如果加入新的曲線不是這個名字，從後台傳進來的

json

物件也不是這個名字，那就顯示不了了。

我在搞定這個問題前看到乙個方法，一開始我自己感覺，這個方法也是沒問題的，但是就一直沒搞出來。這個方法是先建立乙個

chart

物件，然後通過乙個函式來動態通過

ext.ajax.request

向後台請求得到資料，然後動態重新整理

chart

的axes

的fields

，以及series

，還有store

的fields

和data

幾項資料。

糾結了好幾天不知道什麼原因，就是不能正確顯示影象。（感覺方法應該可行，但是我沒找到錯誤的原因，等我再去試一試看看能不能用此方法顯示）。

我後來換了一種方法，搞定此問題，方法與上面這個相反，我是首先定義乙個

store

，命名為

groupname_store

，然後store

儲存的值是每次從後台取到的本次將要顯示在

chart

位置的chart

的axes

的fields

內容，有了這一項內容，實際上

series

和chart

的store

的fields

也就相應的有了，因為

axes

的fields

只是定義的

chart

曲線的縱座標的域值（每條線的名字，

extjs

中靠fields

來解析json

內容），

chart

的縱座標肯定只有乙個域值，這個肯定是固定的，就算是不固定的，你也同樣可以加在首先定義的這個儲存名字的

groupname_store

中。如上，我在

groupname_store

定義時加乙個

listeners

，判斷store

是否已經載入完，載入完後，用乙個陣列把

store

中的值取出來存入，然後當做乙個引數傳入乙個建立

chart

的函式，用這個函式根據傳入的

fields

建立乙個

chart

物件，這樣，

chart

每次就是動態建立的了，再把

chart

加到頁面相應的位置，就能顯示了，前提是先刪除原本的

chart

。具體**如下：

var groupname_store =  ext.create('ext.data.store', 
},listeners:,
load:function(groupname_store)
}});
var getstore = function(fields)
}});
return store;
};var createchart = function(myfields)
, axis: 'left',
xfield : 'data',
yfield : datafield,
smooth: true,
style: ,
markerconfig: ,
tips: 
} }); } 
var chart_store = getstore(storefields);
var chart = ext.create('ext.chart.chart', , 
store: chart_store,
axes: [, 
minorticksteps: 1,
minimum: 0,
maxmum: 100 
}, ],
series: myseries
});return chart;
};

**大致如上，可能在寫部落格時有遺漏或者寫錯地方（如果參照使用，請根據具體情況，自己改改）……

EXTJS動態重新整理chart的fields

extjs之動態重新整理活動的tab頁

為Excel動態新增Chart資料

ExtJS 動態新增checkboxgroup

EXTJS動態重新整理chart的fields

extjs之動態重新整理活動的tab頁

為Excel動態新增Chart資料

ExtJS 動態新增checkboxgroup

相關推薦