Extjs5.1 柱状图动态加载

来源：互联网发布：淘宝警告店铺停止刷单编辑：程序博客网时间：2024/06/05 11:32

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；

1 0