Extjs5.1 柱状图动态加载

Extjs 5.1 动态加载柱状图fields

      使用 mvvm模式加载数据

详细参考5.1

      XXView.js

{
xtype:'panel',
layout : 'fit',
id : 'showBar'
}

XXController.js

//创建fields数组,data数组
var filedsArray = new Array();
fieldsArray.push('name');
//fields格式 fields['name','a1','a2','a3','a4']
var dataArray = new Array();
//自定义数据显示颜色
var colorsArray = ['#2EC7C9', '#B6A2DE', '#FFB980', '#5AB1EF', '#90EE90', '#FF82AB', '#91C7AE', '#8DBCEC'];
//fieldsVal,dataVal后台传递过来的数据
fieldsArray.push(fieldsVal);
dataArray.push(dataVal);

</pre><pre name="code" class="javascript">//加载新数据前，根据容器id，移除该容器下所有子容器
Ext.getCmp('showBar').removeAll();
Ext.getCmp('showBar').add({
xtype : 'cartesian',
background : '#EEEEEE',
innerPadding : '0 0 0 1',
store : {
fields : fieldsArray.slice(0, fieldsArray.length - 1),
data : dataArray
},
legend : { // 提示的图块信息
position : 'top'
},
axes : [{
type : 'numeric',
position : 'left',
minimum : 0
}, {
type : 'category',
position : 'bottom',
fields : 'name'
}],
series : [{
type : 'bar',
//该属性不设置显示为堆叠图，设置为false显示为普通柱状图
                                                               stacked : false,
xField : 'name',
yField : filedsArray.slice(1, filedsArray.length - 1),
axis : 'bottom',
style : {
inGroupGapWidth : -1
},
colors : ['#2EC7C9', '#B6A2DE', '#FFB980', '#5AB1EF', '#90EE90', '#FF82AB', '#91C7AE', '#8DBCEC']
}]
});

堆叠柱状图



普通柱状图

补充：图例fields数据底色，需要去build出来的css中设置.x-panel-body-default的background：none；