EXTJS4自学手册——柱状图

一、创建数据容器：

 var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'age'],
            data: [
            { name: '张三', age: 25 },
            { name: '李四', age: 24 },
            { name: '王麻子', age: 30 },
            { name: '赵六', age: 28 },
            { name: '谢七', age: 32 }
            ]
        });

二、创建柱状图：

 Ext.create('Ext.window.Window', {
                            width:500,
                            height:300,
                            layout:'fit',
                            maximizable: true,
                            items: {
                                xtype: 'chart',
                                style: 'background:#fff',
                                animate: true,//动画效果
                                store: store,
                                axes: [{
                                    type: 'Numeric',//数量，一般是纵坐标
                                    position: 'left',//位置，左边
                                    fields: ['age'],//取数据库的那个字段作为数据
                                    title: '年龄',//纵坐标显示的名称
                                    grid: true,//显示网格线
                                    minimum: 0//纵坐标从0开始
                                }, {
                                    type: 'Category',//类别，一般是横坐标
                                    position: 'bottom',//位置，下边
                                    fields: ['name'],//取数据库的那个字段作为数据
                                    //grid: true,//显示网格线
                                    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: 'name',
                                    yField: 'age'
                                }]
                            }
                        }).show();

显示效果：