EXTJS4自学手册——分组区域图

一、数据容器：

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

二、创建分组区域图：

注意其和区域图的区别，是更改了axes的fields属性，和series的yFields属性

Ext.define("ExtStudy.GroupAreaChar", {
    extend: 'Ext.window.Window',
    width: 500,
    height: 300,
    layout: 'fit',
    maximizable: true,
    items: {
        xtype: 'chart',
        style: 'background:#fff',
        animate: true,
        store: groupAreaCharStore,
        axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['铁', '铜', '铝'],
            title: '数量',
            grid: true,
            minimum: 0
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['年'],
            calculateCategoryCount: false,
            title: '年份'
        }],
        legend: {
            position: 'right'
        },
        series: [{//图像显示配置
            type: 'area',//采用区域图
            highlight: true,
            tips: {//鼠标指到特定柱状图时显示的信息
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function (storeItem, item) {
                    this.setTitle(item.storeField + ': ' + storeItem.get(item.storeField));
                }
            },
            xField: '年份',
            yField: ['铁', '铜', '铝']
        }]
    }
})

效果图：