Ext4.1 chart的使用

var reportsPanel = Ext.create('Ext.panel.Panel', {

id:'reportsPanel',

   layout: 'fit',

   tbar: [{

       text: '保存报表',

       handler: function() {

           Ext.MessageBox.confirm('确认下载', '您想保存报表到图片', function(choice){

               if(choice == 'yes'){

                   chart.save({

                       type: 'image/png'

                   });

               }

           });

       }

   },'-',{

    text: '分别显示',

    menu:[{

text:'整年'

},'-',{

text:'季度'

},'-',{

text:'月份'

}]

   }],

   items:chart

});





var store1 = Ext.create('Ext.data.Store',{//JsonStore  

    fields:['date', 'price', 'sales'], //日期、单位价格、销售额

    data: [

{date  :'1/1', price : 5, sales : 140}, 

{date  :'1/2', price : 29, sales : 135},

{date  :'1/3', price : 18, sales : 125},  

{date  :'1/4', price : 21, sales : 130},  

{date  :'1/5', price : 23,sales : 124},  

{date  :'1/6', price : 16, sales : 137},

{date  :'1/7', price : 13, sales : 90}, 

{date  :'1/8', price : 19, sales : 128},

{date  :'1/9', price : 21, sales : 159},  

{date  :'1/10', price : 40, sales : 151},  

{date  :'1/11', price : 30,sales : 89},  

{date  :'1/12', price : 19, sales : 130},

{date  :'1/13', price : 12, sales : 133}, 

{date  :'1/14', price : 3, sales : 96},

{date  :'1/15', price : 23, sales : 142},  

{date  :'1/16', price : 12, sales : 81},  

{date  :'1/17', price : 19,sales : 94},  

{date  :'1/18', price : 11, sales : 119},

{date  :'1/19', price : 22, sales : 120}, 

{date  :'1/20', price : 13, sales : 121},

{date  :'1/21', price : 35, sales : 135},  

{date  :'1/22', price : 12, sales : 111},  

{date  :'1/23', price : 36,sales : 117},  

{date  :'1/24', price : 19, sales : 117},

{date  :'1/26', price : 17, sales : 95}, 

{date  :'1/27', price : 38, sales : 135},

{date  :'1/28', price : 12, sales : 122},  

{date  :'1/29', price : 45, sales : 130},  

{date  :'1/30', price : 46,sales : 99},  

{date  :'1/31', price : 7, sales : 130}

    ]  

}); 

var chart = Ext.create('Ext.chart.Chart', {

    id: 'chartCmp',

    xtype: 'chart',

    style: 'background:#fff',

    theme: 'Category6',

    animate: true,

//    shadow: true,

    maximizable: true,  

    store: store1,

    axes: [{

        type: 'Numeric',

        position: 'left',

        fields: ['date','price', 'sales'],

        label: {

            renderer: Ext.util.Format.numberRenderer('0,0')

        },

        title: '价格：百吨',

        grid: true,

        minimum: 0

    }, {

        type: 'Category',

        position: 'bottom',

        fields: ['date'],

        title: '日期'

    }],

    series: [{//油品，单位价格价格浮动

        type: 'column',

        axis: 'left',

        highlight: true,

        tips: {

          trackMouse: true,

          width: 140,

          height: 28,

          renderer: function(storeItem, item) {

            this.setTitle(storeItem.get('date') + ': ' + storeItem.get('price')+'%');

          }

        },

        label: {

          display: 'insideEnd',

          'text-anchor': 'middle',

            field: 'date',

            renderer: Ext.util.Format.numberRenderer('0'),

            orientation: 'vertical',

            color: '#333'

        },

        xField: 'date',

        yField: 'price'

    },{//销售额

    type: 'line',

        axis: 'left',

        tips: {

            trackMouse: true,

            width: 140,

            height: 28,

            renderer: function(storeItem, item) {

              this.setTitle(storeItem.get('date') + ': ' + storeItem.get('price')+'%');

            }

        },  

        smooth: true,

        markerConfig: {// 由Ext.Draw.Sprite配置项决定   

            type: 'circle',  

            size: 4,  

            radius: 4,  

            fill: '#00f',  

            'stroke-width': 0  

        },  

//        fill: true,

//        fillOpacity: 0.5,

        xField: 'date',

        yField: 'sales'

    }]

});

该图表显示的是不同月份不同单位价格的销售业绩

图表的几大要素：

1、坐标：上、下、左、右。

坐标的类型，数字、分类...

坐标包括须要显示的坐标值。即绑定的字段

坐标值的样式。比方旋转、字体大小、格式

坐标的最大值、最小值、是否显示网格

坐标旁边显示的文字

2、图表：柱状图、折线图、点图、饼图、区域图、盘表图、雷达图...

图标的类型

图表x、y轴相应的字段

图标上显示的文字，文字的样式、位置

鼠标移上去须要显示的提示信息

3、样式

4、数据

属性介绍：

axes:用来配置坐标，能够配置多个坐标。

type：配置坐标的类型。

一般用到的是Numeric、Category

position：配置坐标的位置。比方：上下左右

fields：能够配置多个字段。用来设置坐标显示的值。事实上这个配置和series中的yFiled配置项是没有关系的

label：能够配置文字的显示方式。

默认显示字段的值。

比方设置label旋转一定的度数

label: {

                    rotate: {

                        degrees: 315

                    }

                }

title：配置坐标须要显示的title

grid：设定网格的样式。比方设定网格的透明度、样式等。

grid: { // 设定网格颜色值

                    odd: {

                        opacity: 1,

                        fill: '#ddd',

                        stroke: '#bbb',

                        'stroke-width': 1

                    }

                }

minimum：能够配置坐标的最小值。当然会有相应的最大值maximum。能够配合使用majorTickSteps(主刻度，配置总共同拥有多少个刻度)，minorTickSteps(次刻度，在每一个主可短中画次刻度。

比方配置10。则数字没添加10，会话一个次刻度)

series：用来配置图表

type：配置图表的类型，图表有非常多类型。每一个图表都有各自独特的配置项

axis：相对于哪个坐标。由于坐标有多个。图表的高度，总的有个參照。

highlight：设置鼠标移动到图表上面，是否高亮。只是这个反应非常慢。

tips：设置鼠标移动到图表上时的提示信息

label：设置图表上显示的文字。能够设置文字的位置、样式。但不是每一个图表都有这个配置项。

xField：设定x坐标绑定的字段。

由于axes设定了坐标的值，所以这个字段绑定的值必须在axes的坐标值中。

yField：设定y坐标绑定的字段。