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'
    }]

});

該圖表顯示的是不一樣月份不一樣單位價格的銷售業績

圖表的幾大要素：

一、座標：上、下、左、右。

座標的類型，數字、分類...

座標包括需要顯示的座標值。即綁定的字段

座標值的樣式。比方旋轉、字體大小、格式

座標的最大值、最小值、是否顯示網格

座標旁邊顯示的文字

二、圖表：柱狀圖、折線圖、點圖、餅圖、區域圖、盤表圖、雷達圖...

圖標的類型

圖表x、y軸相應的字段

圖標上顯示的文字，文字的樣式、位置

鼠標移上去需要顯示的提示信息

三、樣式

四、數據

屬性介紹：

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座標綁定的字段。