EXTJS4自学手册——区域图

一、定义数据容器：

var areaCharStore = Ext.create('Ext.data.JsonStore', {
    fields: ['地区', '人口'],
    data: [
        { '地区': '重庆', '人口': 1000 },
        { '地区': '上海', '人口': 2000 },
        { '地区': '成都', '人口': 1200 },
        { '地区': '云南', '人口': 800 }
    ]
});

二、定义区域图：

注意其和线形图的区别，主要在于series属性的type属性

Ext.define("ExtStudy.AreaChar", {
    extend: 'Ext.window.Window',
    width: 500,
    height: 300,
    layout: 'fit',
    maximizable: true,
    items: {
        xtype: 'chart',
        style: 'background:#fff',
        animate: true,
        store: areaCharStore,
        axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['人口'],
            title: '数量',
            grid: true,
            minimum: 0
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['地区'],
            calculateCategoryCount: false,
            title: '年份'
        }],
        series: [{
            type: 'area',//采用线形图
            highlight:true,
            tips: {//鼠标指向节点时的提示信息
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function (storeItem, item) {
                    this.setTitle(storeItem.get('地区') + ': 人口' + storeItem.
                    get('人口') + '万');
                }
            },
           // axis: 'left',
            xField: '地区',//x轴数据
            yField: '人口'//y轴数据
        }]
    }
})

效果：