Extjs5.1 柱状图动态加载

最新推荐文章于 2018-11-08 09:45:57 发布

原创最新推荐文章于 2018-11-08 09:45:57 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #图表 chart

本文介绍了如何在Extjs 5.1中使用MVVM模式动态加载柱状图数据，包括堆叠柱状图和普通柱状图的实现，提供了XXView.js文件的部分内容作为参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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']
                                                            }]
                                                });

堆叠柱状图