Ext.js 是一款用于構(gòu)建 JavaScript 客戶端程序的框架。在開發(fā)中，我們經(jīng)常會(huì)使用到條形圖，并需要從后臺(tái)獲取數(shù)據(jù)。下面介紹使用 Ext.Ajax.request 方法從后臺(tái)獲取 JSON 數(shù)據(jù)并生成條形圖的方法。

首先，配置 Ext.Ajax.request 方法的參數(shù)，包括請(qǐng)求的 URL、傳輸方式、請(qǐng)求成功后的回調(diào)函數(shù)等。

Ext.Ajax.request({
url: 'data.json',
method: 'GET',
success: function(response) {
var json = Ext.decode(response.responseText);
...
}
});

其中，data.json 表示請(qǐng)求的數(shù)據(jù)地址，GET 表示使用 GET 方法進(jìn)行請(qǐng)求。

當(dāng)請(qǐng)求成功后，我們需要解析返回的 JSON 數(shù)據(jù)，并將其轉(zhuǎn)換為條形圖所需要的數(shù)據(jù)格式。在 Ext.js 中，數(shù)據(jù)格式為數(shù)組，每個(gè)元素為一個(gè)對(duì)象，包括 name 和 data 屬性。

var jsonData = Ext.decode(response.responseText);
var barData = [];
jsonData.forEach(function(item) {
barData.push({
name: item.name,
data: item.data
});
});

使用生成條形圖的方法 Ext.create('Ext.chart.CartesianChart', ...) 生成條形圖，并將解析后的數(shù)據(jù)傳遞給 data 屬性。

Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 800,
height: 400,
xtype: 'cartesian',
store: store,
axes: [...],
series: [...],
..."
data: barData
});

其中，store、axes、series 等屬性可根據(jù)條形圖的具體需求進(jìn)行配置。

最后，將以上代碼整合到一個(gè)函數(shù)中，并在需要生成條形圖時(shí)調(diào)用即可。

function createBarChart() {
Ext.Ajax.request({
url: 'data.json',
method: 'GET',
success: function(response) {
var jsonData = Ext.decode(response.responseText);
var barData = [];
jsonData.forEach(function(item) {
barData.push({
name: item.name,
data: item.data
});
});
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 800,
height: 400,
xtype: 'cartesian',
store: store,
axes: [...],
series: [...],
..."
data: barData
});
}
});
}
createBarChart();