EXT根据数据绘制chart柱状图和饼图，动态改变坐标轴

fields是所有字段名称

fields =[{"name":"COMPANY_NAME"},{"name":"C1"},{"name":"C2"},{"name":"C3"},{},{}.....]

data是原始数据

data = [{"COMPANY_NAME":"A公司","C1":"13895","C2":"13455","C2":"155"...},<pre name="code" class="javascript">{"COMPANY_NAME":"A公司","C1":"11125","C2":"13455","C2":"195"....},

{"COMPANY_NAME":"A公司","C1":"13345","C2":"14445","C2":"85"...},....]

header 是 combobox的键值对，作为其store的data

header = [{"text":"公司","dataIndex":"COMPANY_NAME"},{"text":"营业额","dataIndex":"F000201001"},{"text":"市场占有","dataIndex":"C1"},{"text":"研发投入","dataIndex":"C2"}，{},{}.....]

Ext.define('chartChangeByCombo', {
extend: 'Ext.panel.Panel',
constructor: function () {
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: '对比项',
labelWidth: 50,
width: 260,
store: Ext.create('Ext.data.Store', {
fields: ['text', 'dataIndex'],
data:header,
// filters: [   //将指定字段禁止显示
//         function (item) {
//             var id = item.data.dataIndex;
//             if (id == '指定字段')
//                 return false;
//             else
//                 return true;
//         }
// ]
}).load(),
listeners: {
'change': function (obj) {
this.findParentByType('panel').items.items[1].axes.items[0].fields[0] = obj.getValue();
this.findParentByType('panel').items.items[1].axes.items[0].setTitle(obj.getRawValue());
this.findParentByType('panel').items.items[1].axes.items[0].drawAxis();
this.findParentByType('panel').items.items[1].series.items[0].yField = obj.getValue();
this.findParentByType('panel').items.items[1].redraw();
}
},
queryMode: 'local',
displayField: 'text',
valueField: 'dataIndex',
});

var chart = Ext.create('Ext.chart.Chart', {
width: 270,
autoScroll: true,
height: 600,
animate: true,
store: Ext.create('Ext.data.JsonStore', {
fields:fields,
data: data
}),
legend: {
position: 'top'   //图例
},
axes: [
{
type: 'Numeric',
position: 'bottom',
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
//title: '营业额',
grid: true,
minimum: 0,
label: {
rotate: {
degrees: 315
}
}
},
{
type: 'Category',
position: 'left',
fields: ['COMPANY_NAME']
}
],
series: [
{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 200,
height: 30,
renderer: function (storeItem, item) {
this.setTitle(item.value[0] + ': ' + storeItem.get(item.yField));
}
},
xField: 'COMPANY_NAME'
}
]
}
);
Ext.apply(this, {
height: 520,
width: '100%',
title:'柱状图',
autoScroll: true,
items: [
combo,
chart
]
});
this.callParent(arguments);
}
});