extjs図表作成の棒グラフの実現方法の分析

本論文の例は、extjsのグラフによる棒グラフの実現方法を説明する。皆さんに参考にしてあげます。具体的には以下の通りです。
この文章はextjsグラフの棒グラフを紹介します。
以下の機能を実現します。
1.バックエンドからデータを要求し、グラフに運用し、ダイナミックデータを形成する。
2.毎年の毎月の人数を調べます。
3.棒の色を変えて、デフォルトの色を自分の好きな色に変えます。

 renderer: function(sprite, storeItem, barAttr, i, store) {
          barAttr.fill = '#3D96AE'
          return barAttr;
        },

まず完全なコードを見ます。

Ext.define('ChartColumnTest', {
  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;
            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
        }
      },
      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: 'column',
        axis: 'left',
        title:'     ',
        highlight: true,
        tips: {
          trackMouse: true,
          width: 200,
          height: 28,
          renderer: function(storeItem, item) {
            this.setTitle( "  ："+storeItem.get('activeCount')+",  ："+storeItem.get('effectiveProportion') );
          }
        },
        //        
        renderer: function(sprite, storeItem, barAttr, i, store) {
          barAttr.fill = '#3D96AE'
          return barAttr;
        },
        //            
        label: {
          display: 'outside',
          'text-anchor': 'middle',
          field: 'activeCount',
          renderer: Ext.util.Format.numberRenderer('0'),
          orientation: 'horizontal',//           
          font: '25px Helvetica, sans-serif',
          'text-anchor': 'start',
          color: 'red',
        },
        xField: 'statTime',
        yField: 'activeCount',
       // yPadding:100,   x    
      },
    ];
    return columns;
  }

});

上の図のコードについて説明します。
1.パンにグラフを定義します。棒グラフは主にdata（データ）、軸（y、x軸）、シリーズ（series）から構成されています。
2.クエリーのtbarを定義し、図中のデータは年ごとに調べられ、動的に表示されます。
3.y軸にマーキングしたのは人数で、最大値と最小値を定義して、各間隔の大きさを自動的に調整します。positionの定義位置は「left」、「Right」、bottom、「top」の4種類です。

 type: 'Numeric',
        position: 'left',
        minimum: 1000,
        maximum: 10000,

4.ステップ どれぐらいの間隔でこのケースを定義しますか？私は一ヶ月を間隔とします。positionの定義位置は「left」、「Right」、bottom、「top」の4種類で、グリッドレイアウトではありません。

 {
        type: 'Time',
        position: 'bottom',
        fields: 'statTime',
        step: [Ext.Date.MONTH, 1],
        dateFormat: 'y-m',
        title: '  ',
        grid: false,

      }

5.tips グラフにマウスを置くと表示されるテキストです。レンダーメソッドに自分の表示したい文字を設定します。

 tips: {
          trackMouse: true,
          width: 200,
          height: 28,
          renderer: function(storeItem, item) {
            this.setTitle( "  ："+storeItem.get('activeCount')+",  ："+storeItem.
              get('effectiveProportion') );
          }
        },

6.定義されたシリーズにおいて、レンダー方法を定義し、この方法でバーの色を変更することができる。

renderer: function(sprite, storeItem, barAttr, i, store) {
          barAttr.fill = '#3D96AE'
          return barAttr;
        },

7.labelで文字を表示する方向と文字の表示位置を調整することができます。

label: {
          display: 'outside',
          'text-anchor': 'middle',
          field: 'activeCount',
          renderer: Ext.util.Format.numberRenderer('0'),
          orientation: 'horizontal',//           
          font: '25px Helvetica, sans-serif',
          'text-anchor': 'start',
          color: 'red',
        },

displayは文字のグラフ内の表示位置を変えることができます。insideStart'は、'insideEnd'は、'outside'はそれぞれの棒の最初、一番後ろと外を表します。みんな自分で行ってみてもいいです。
JavaScriptに関するより多くの内容に興味がある読者は、本局のテーマを見ることができます。「JavaScript画像操作技術大全書」、「JavaScript切替特効とテクニックのまとめ」、「JavaScript運動効果とテクニックのまとめ」、「JavaScriptアニメーションの特効と技巧のまとめ」、「JavaScriptエラーとデバッグテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」および「JavaScriptはアルゴリズムと技術の総括を遍歴します。」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。