extjs 4グラフの折れ線図の実現方法の分析

本論文の例は、extjs 4グラフによる折れ線図の実現方法を説明する。皆さんに参考にしてあげます。具体的には以下の通りです。
この文章はextjsの中で自分のグラフを紹介します。
今回のケースでは、機能を提供します。
1.バックエンドからデータを要求し、グラフに運用し、ダイナミックデータを形成する。
2.毎年の毎月の人数を調べます。
下記のコードを見てください。

Ext.define('ChartLineTest', {
  extend: 'Ext.panel.Panel',
  autoScroll : true,
  selectYear:null,//    
  initComponent: function () {//       
    var me = this;
    me.store = me.createStore();//    
    me.grid = me.getGridPanel();
    me.mainPanel = Ext.create('Ext.panel.Panel',{
      layout:'fit',
      items:[me.grid],
      tbar:me.createQueryTbar(),//       
    });

    Ext.apply(me,{
      layout:'fit',
      items:[me.mainPanel]
    });
    me.callParent();
    me.mainPanel.down('chart').on('cellclick', function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
      me.onCellClick(cellIndex, record);
    });
  },

  getGridPanel:function(){
    var me = this;
    return {
      xtype:'chart',
      animate : true,//           
        legend: {//   
          display: "bottom",
          spacing: 2,
          padding: 5,
          font: {
            name: 'Tahoma',
            color: '#3366FF',
            size: 12,
            bold: true
          }
        },
      store:me.store,
      axes:me.createAxes(),//       
      series:me.createSeries(),//        
    }
  },
  createQueryTbar: function(){
    var me=this;
    var tbar=[
      {
        xtype : 'combo',
        fieldLabel:'    ',
        name:'selectYear',
        queryMode : 'local',
        editable : true,
        readOnly:false,
        labelWidth: 60,
        width:200,
        store : new Ext.data.ArrayStore({
          fields : ['id','name'],

          data : []
        }),
        valueField : 'name',
        displayField : 'id',
        triggerAction : 'all',
        autoSelect : true,
        listeners : {
          beforerender : function(){
            var newyear = Ext.Date.format(new Date(),'Y');//           
            var yearlist = [];
            for(var i = newyear;i>=2015;i--){
              yearlist.push([i,i]);
            }
            this.store.loadData(yearlist);
          }
        }
      },
      {xtype: 'button',text : '  ',
        listeners : {
          "click" : function() {
            var value = Ext.ComponentQuery.query('[name=selectYear]')["0"].value;
            me.selectYear = value;//   selectYear  
            me.store.load();
          }}}
    ];
    return tbar;
  },
  createStore: function () {
    //       
    var me = this;
    return Ext.create('Ext.data.JsonStore', {
      fields: [
        {name: 'id', mapping: 'id'},
        {name:'statTime',mapping:'statTime',type:'date',dateFormat:'time'},
        'activeCount', 'effectiveCount','effectiveProportion',
      ],
      proxy: {
        type: 'ajax',
        url: ctx+'/mvc/com/analyze/tblVwMonthUserStat',
        reader: {
          type: 'json',
          root: 'root',
          totalProperty: 'totalProperty'
        }
      },
      listeners: {
        'beforeload': function (store, operation, eOpts) {
          store.proxy.extraParams.selectYear = me.selectYear//   selectYear  
        }
      },
      autoLoad: true
    });
  },

  createAxes: function () {
    var me = this;
    var columns = [
      {
        type: 'Numeric',
        position: 'left',//    
        minimum: 1000,
        maximum: 10000,

        label: {
          renderer: Ext.util.Format.numberRenderer('0,0')
        },
        title: '  ',
        grid: true,
      },
      {
        type: 'Numeric',
        position: 'right',
        minimum: 1000,
        maximum: 10000,

        label: {
          renderer: Ext.util.Format.numberRenderer('0,0')
        },
        title: '  ',
        grid: true,
      },
      {
        type: 'Time',
        position: 'bottom',
        fields: 'statTime',
        step: [Ext.Date.MONTH, 1],///    
        dateFormat: 'y-m',
        title: '  ',
        grid: false,

      }
    ];
    return columns;
  },
  createSeries: function () {
    var me = this;
    var columns = [
      {
        type: 'line',
        highlight: {
          size: 7,
          radius: 7
        },
        fill: false,
        // showInLegend:false,//   false            
        axis: 'left',
        xField: 'statTime',
        renderer: Ext.util.Format.dateRenderer('Y-m '),
        yField: 'activeCount',
        title :'    ',
        //    （   ）          
        tips: {
          trackMouse: true,
          width: 200,
          height: 40,
          renderer: function(storeItem, item) {
            this.setTitle( "  ："+storeItem.get('activeCount')+",  ："+storeItem.get('effectiveProportion') );
          }
        },
        label: {
          display: 'insideEnd',
          field: 'activeCount',
          renderer: Ext.util.Format.numberRenderer('0'),
          orientation: 'vertical',
          font:'15px Helvetica, sans-serif',
          'text-anchor': 'end',
          color:'red',
        },
        markerConfig: {
          type: 'cross',
          size: 3,
          radius: 3,
          'stroke-width': 0
        }
      },
      {
        type: 'line',
        highlight: {
          size: 7,
          radius: 7
        },
        // selectionTolerance:0,

        axis: 'left',
        title :'    ',
        fill: false,
        xField: 'statTime',
        renderer: Ext.util.Format.dateRenderer('Y-m '),
        yField: 'effectiveCount',

        markerConfig: {
          type: 'circle',
          size: 3,
          radius: 3,
          'stroke-width': 0
        },
        /* style: {
          color: '#6666CC'
        },*/
        style: {
          stroke: '#00ff00',
          /* 'stroke-width': 10,
          fill: '#80A080',
          opacity: 0.2*/
        },
     /*   label: {
          display: 'middle',
          field: 'effectiveCount',
          renderer: Ext.util.Format.numberRenderer('0'),
          orientation: 'vertical',
          font: '15px Helvetica, sans-serif',
          'text-anchor': 'end',
          color: 'red',
          minMargin:100,
        },*/
        //           
        label: {
          display: 'over',
          field: 'effectiveCount',
          renderer: Ext.util.Format.numberRenderer('0'),
          orientation: 'vertical',//        ‘horizontal'    
          font: '15px Helvetica, sans-serif',
          'text-anchor': 'start',
          color: 'red',//     
          //           ，     5000          
          renderer: function(value, label, storeItem, item, i, display, animate, index) {

            if (value >= 5000) {
              label.setAttributes({fill:'#080',});
              value = value;
            }
            return value;
          }
        }
      },

    ];
    return columns;
  }

});

グラフごとに三つの構成部分が必要です。データ、軸（axes）、シリーズ（Series）。
データ -  は、グラフで示す情報です。Extでは標準のModelまたはStoreを使います。
軸 - データの出所、範囲、規模と単位を提供します。グラフを構成する基本的なアーキテクチャ。軸は、デカルト座標（x，y）、極性（または径方向）、または軌間（ダッシュボードのグラフに使用される1次元軸）とすることができる。複数のタイプのシリーズを組み合わせたグラフは、追加の軸定義が必要ですが、ほとんどのグラフは、軸のセットを使用します。
シリーズ これはデータ用の図形描画に属します。つまり、グラフ、棒グラフ、バーまたは円グラフのようなアイコンの基本的な画像項目です。一つの図形は複数の系列を含むことができます。例えば、1つの図形の中に3つの線状図があります。3つの独立した線系列があります。
ラベル、タグ、凡例を図に追加することができます。アニメーション効果を設定したり、ブロックを拡大したりすることもできます。
label(ラベル)-- 軸またはシステムの解釈タイトル。
マーカー(マーク) -- 一連のデータポイントの記号、形状、または画像を描画するために使用します。
legend（説明） -- 図の説明を提供し、各変数が図形に代表される意味を説明します。凡例）
listeners(モニター)--ある事件を待って、マウスのような動きをします。
アニメーション(アニメーション)--  図の要素は移動可能です。
tips(プロンプトボックス)-- 軸にマウスを置くとヒントテキストが表示されます。
マーカーコンフィグ--各点の座標の形状を定義します。
JavaScriptに関するより多くの内容に興味がある読者は、本局のテーマを見ることができます。「JavaScript画像操作技術大全書」、「JavaScript切替特効とテクニックのまとめ」、「JavaScript運動効果とテクニックのまとめ」、「JavaScriptアニメーションの特効と技巧のまとめ」、「JavaScriptエラーとデバッグテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」および「JavaScriptはアルゴリズムと技術の総括を遍歴します。」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。