Ext.chart.Chart 顯示圖標 -- 本地數據

先來張直觀的圖，基於ext4.2製做

這就是彈出來的圖表了。

今天先搭建一個本地數據版，也是靜態數據版。

點擊一個按鈕執行一個function，來看function裏面的東西：

1、依賴 

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

 

2、數據

            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
                }]
            });

 

3、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']
                    }
                ]
            });

 

4、裝入彈窗

            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
            });

  

完事。

動態數據版稍後登場...