EXTJS4自学手册——分组柱状图

一、创建容器：

var multiReportStore = Ext.create('Ext.data.JsonStore', {
    fields: ['铁', '铜', '铝', '年'],
    data: [
        { '铁': 10000, '铜': 8000, '铝': 7000, '年': '2008' },
        { '铁': 11000, '铜': 10000, '铝': 8000, '年': '2009' },
        { '铁': 8000, '铜': 11000, '铝': 10000, '年': '2010' },
        { '铁': 15000, '铜': 11500, '铝': 11000, '年': '2010' }
    ]
});

二、创建分组柱状图：

注意和柱状图不一样的地方：

1.axes的fields属性

2.series的yField属性

Ext.define("ExtStudy.MultRerport", {
    extend: 'Ext.window.Window',
    width: 500,
    height: 300,
    layout: 'fit',
    maximizable: true,
    items: {
        xtype: 'chart',
        style: 'background:#fff',
        animate: true,//动画效果
        store: multiReportStore,
        axes: [{
            type: 'Numeric',//数量，一般是纵坐标
            position: 'left',//位置，左边
            fields: ['铁', '铜', '铝'],//取数据库的那个字段作为数据
            title: '数量',//纵坐标显示的名称
            grid: true,//显示网格线
            minimum: 0//纵坐标从0开始
        }, {
            type: 'Category',//类别，一般是横坐标
            position: 'bottom',//位置，下边
            fields: ['年'],//取数据库的那个字段作为数据
            //grid: true,//显示网格线
            calculateCategoryCount: false,
            title: '年份'//横坐标显示的名称
        }],
        legend: {
            position: 'right'//说明显示位置

        },
        series: [{//图像显示配置
            type: 'column',//采用柱状图
            highlight: true,
            tips: {//鼠标指到特定柱状图时显示的信息
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function (storeItem, item) {
                    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('age'));
                }
            },
            xField: '年份',
            yField: ['铁', '铜', '铝']
        }]
    }
})

效果：