Ext.chart.Chart 显示图标 -- 本地数据

先来张直观的图，基于ext4.2制作

这就是弹出来的图表了。

今天先搭建一个本地数据版，也是静态数据版。

点击一个按钮执行一个function，来看function里面的东西：

一、依赖 

            Ext.require('Ext.chart.*');
            Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);

 

二、数据

            var store1= Ext.create('Ext.data.JsonStore', {
                fields: ['name', 'total', 'passed', 'deleted'],
                data: [
                {
                    'name': '张三',
                    'total': 10,
                    'passed': 6,
                    'deleted': 4
                }, {
                    'name': '李四',
                    'total': 10,
                    'passed': 5,
                    'deleted': 5
                }, {
                    'name': '王五',
                    'total': 7,
                    'passed': 4,
                    'deleted': 3
                }, {
                    'name': '赵六',
                    'total': 50,
                    'passed': 40,
                    'deleted': 10
                }, {
                    'name': '赵六',
                    'total': 50,
                    'passed': 40,
                    'deleted': 10
                }]
            });

 

三、chart

            var chart = Ext.create('Ext.chart.Chart', {
                style: 'background:#fff',
                animate: true,        //动画
                shadow: true,         //阴影
                store: store1,        //##
                legend: {             
                  position: 'right'   //图例
                },
                axes: [{
                    type: 'Numeric',  //显示图形类型- line：则线图；column：柱形图；radar：
                    position: 'bottom',        //
                    //fields: ['total', 'passed', 'deleted'],
                    xField: 'name',
                    yField: ['total', 'passed', 'deleted'],
                    minimum: 0,  //如果小于这个数，图标向下（相当于设置了一个起始点）
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    grid: true,
                    title: '文章数'
                }, {
                    type: 'Category',
                    position: 'left',
                    fields: ['name']
                    //, title: '员工绩效统计图'
                }],
                series: [{
                    type: 'bar',
                    axis: 'bottom',
                    xField: 'name',
                    yField: ['total', 'passed', 'deleted']
                    }
                ]
            });

 

四、装入弹窗

            var win = Ext.create('Ext.Window', {
                width: 800,
                height: 600,
                minHeight: 400,
                minWidth: 550,
                hidden: false,
                maximizable: true,
                title: '员工绩效统计图',
                autoShow: true,
                layout: 'fit',
                tbar: [{
                    text: '下载图表',
                    handler: function() {
                        Ext.MessageBox.confirm('下载提示', '是否下载当前图表?', function(choice){
                            if(choice == 'yes'){
                                chart.save({
                                    type: 'image/png'
                                });
                            }
                        });
                    }
                }],
                items: chart
            });

  

完事。

动态数据版稍后登场...