代码三部分:
1. 创建容器
me.items = [
{
xtype: 'panel',
name: 'chartPanel',
region: 'center',
layout: 'fit',
autoScroll: true,
layout: { type: 'vbox', align: 'center', pack: 'center' }
}
]
2.加载数据
Ext.Ajax.request({
url: SWG.dataService,
params: {
responderId: 'IOTControlBodyTemperatureResponder',
action: 'getbodytemperaturestatbyday',
personalType: 1,
startTime: startDate.rawValue,
endTime: endDate.rawValue,
likeName: likeName.rawValue,
classId: classId == "全部" ? "" : classId,
page: 1,
start: 0,
limit: 99999
},
callback: function (options, success, response) {
me.getEl().unmask();
if (success) { // 请求成功
var result = Ext.decode(response.responseText);
if (result.first) { // 处理成功
var datas = result.second;
if (!datas) { return }
//动态创建 grid chart
me.createChartPanel(datas);
}
else { // 处理失败
SouthWing.Extend.MessageBox.alert('prompt', _L('Operation failed!') + (result.fourth ? result.fourth : ''));
}
}
else { // 请求失败
SouthWing.Extend.MessageBox.alert(_L('error'), _L('request error'));
}
},
scope: me
});
3.
createChartPanel: function (finalDatas) {
var me = this;
var allFields = ["number", "name", "TAll", "T01", "T02", "T03", "T04", "T05", "Tother"];
var fields = ['name'];
var fieldTexts = [_L('学生体温统计图')];
//me.type = type;
me.finalDatas = finalDatas;
console.log(finalDatas)
var chartWidth = finalDatas.length * 140;
if (chartWidth < 400) {
chartWidth = 400;
}
var store = Ext.create('Ext.data.Store', {
fields: allFields
});
var chart = Ext.create('Ext.chart.Chart', {
width:'100%',
//width: chartWidth,
layout: 'fit',
xtype: "chart",
height: chartWidth,
animate: true,
shadow: true,
store: store,
legend: {
position: "top",
boxStroke: "rgba(0,0,0,0.5)"
},
axes: [
{
type: "Numeric",
position:'bottom',
//dashSize: 10,
//length: 20,
//position: "left",
//fields: ["T01", "T01"],//, "TAll"
fields: ["T01", "T01", "T03", "T04", "T05", "Tother", "TAll"],//, "TAll"
title: _L('次数'),
//grid: true,
}, {
type: 'Category',
position: 'left',
fields: ["name"],
//majorTickSteps: 100,
//minorTickSteps: 0,
//calculateCategoryCount: true,
label: {
rotate: {
//degrees: -45
}
},
title: _L('学生姓名')
}
],
legend:{
position:'bottom'
},
series: [
{
type: "bar",
gutter: 50,
groupGutter:20,
xPadding: 10,
yPadding: 10,
axis: "bottom",
highlight: true,
xField: "name",
yField: ["T01", "T02", "T03", "T04", "T05", "Tother", "TAll"],//, "TAll"
title: [_L('过低'), _L('正常'), _L('低热'), _L('中热'), _L('高热'), _L('其他'), _L('全部')],//, _L('全部')
label: {
field: ["T01", "T02", "T03", "T04", "T05", "Tother", "TAll"],
display: "outside",
font: '12px "Lucida Grande"',
renderer: function (v) {
return v;
}
},
//stacked: true,
tips: {
trackMouse: true,
width: 330,
renderer: function (storeItem, item) {
var temp = "";
console.log(item);
console.log(storeItem)
switch (item.yField) {
case "T01":
temp = _L('过低');
break;
case "T02":
temp = _L('正常');
break;
case "T03":
temp = _L('低热');
break;
case "T04":
temp = _L('中热');
break;
case "T05":
temp = _L('高热');
break;
case "Tother":
temp = _L('其他');
break;
case "TAll":
temp = _L('全部');
break;
}
this.setTitle("<span style='color:black;'>" + temp + ":" + item.value[1] + "</span>");
}
}
}
]
});
chart.getStore().loadData(finalDatas);
chart.doComponentLayout();
me.down('panel[name=chartPanel]').items.add(chart);
me.doComponentLayout();
},