EXTJS Stacked Bar Chart堆叠条形图

最新推荐文章于 2026-06-03 10:55:00 发布

原创最新推荐文章于 2026-06-03 10:55:00 发布 · 5.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

ExtJs

本文详细介绍了如何使用EXTJS创建堆叠条形图，包括Json数据的准备，chart与store的绑定，属性设置，特别是axes和series的stack属性配置，以及最终的预览效果展示。

Json数据：

chart绑定store：

往panel内拖入一个bar Chart

创建store，url指定为data2.json，添加name和data1，data2，data3字段，sencha architect自动生成的代码：

Ext.define('MyApp10.store.data2', {
    extend: 'Ext.data.Store',

    requires: [
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json',
        'Ext.data.Field'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            autoSync: true,
            storeId: 'data2',
            proxy: {
                type: 'ajax',
                url: 'data/chart/data2.json',
                reader: {
                    type: 'json'
                }
            },
            fields: [
                {
                    name: 'name'
                },
                {
                    name: 'data1'
                },
                {
                    name: 'data2'
                },
                {
                    name: 'data3'
                }
            ]
        }, cfg)]);
    }
});

设置属性：

为chart添加legend；

axes设置：

<span style="white-space:pre">		</span>axes: [
                                {
                                    type: 'Category',
                                    fields: [
                                        'name'
                                    ],
                                    position: 'left',
                                    title: '名称'
                                },
                                {
                                    type: 'Numeric',
                                    fields: [
                                        'data1',
                                        'data2',
                                        'data3'
                                    ],
                                    position: 'bottom',
                                    title: '数据'
                                }

series设置：

  <span style="white-space:pre">			</span>series: [
                                {
                                    type: 'bar',
                                    label: '//{\'display\':\'insideEnd\',\'field\':\'data1+data2+data3\',\'color\':\'#333\',\'text-anchor\':\'middle\'}',
                                    tips: {
                                        trackMouse: true,
                                        width: '60px',
                                        renderer: function(storeItem, item) {
                                            this.setTitle(item.value[1]+ '$');
                                        }
                                    },
                                    axis: 'bottom',
                                    xField: 'name',
                                    yField: [
                                        'data1',
                                        'data2',
                                        'data3'
                                    ],
                                    <pre name="code" class="javascript"><span style="white-space:pre">				</span>stacked: true

} ],

其中series的stack属性为true时效果：

series的stack属性为false时效果：

全部代码

 {
                    xtype: 'panel',
                    height: 514,
                    title: 'StackBarChart',
                    items: [
                        {
                            xtype: 'chart',
                            height: 535,
                            width: 846,
                            animate: true,
                            insetPadding: 20,
                            store: 'data2',
                            axes: [
                                {
                                    type: 'Category',
                                    fields: [
                                        'name'
                                    ],
                                    position: 'left',
                                    title: '名称'
                                },
                                {
                                    type: 'Numeric',
                                    fields: [
                                        'data1',
                                        'data2',
                                        'data3'
                                    ],
                                    position: 'bottom',
                                    title: '数据'
                                }
                            ],
                            series: [
                                {
                                    type: 'bar',
                                    label: '//{\'display\':\'insideEnd\',\'field\':\'data1+data2+data3\',\'color\':\'#333\',\'text-anchor\':\'middle\'}',
                                    tips: {
                                        trackMouse: true,
                                        width: '60px',
                                        renderer: function(storeItem, item) {
                                            this.setTitle(item.value[1]+ '$');
                                        }
                                    },
                                    axis: 'bottom',
                                    xField: 'name',
                                    yField: [
                                        'data1',
                                        'data2',
                                        'data3'
                                    ],
                                    stacked: true
                                }
                            ],
                            legend: {
                                position: 'right'
                            }
                        }
                    ]
                },