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. 패널에서 차트를 정의합니다.스트라이프 그래프는 주로 데이터(데이터), 축(y, x축), 시리즈(series)로 구성된다.
2. 조회를 정의하는 tbar, 그림의 데이터는 연도에 따라 조회된 것으로 동적 표시에 사용됩니다.
3. y축에 표시된 것은 인원수, 최대치와 최소치를 정의하면 각 간격의 크기를 자동으로 조절한다.position 정의 위치는'left','right','bottom,'top'4가지가 있다.

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

4.step는 얼마나 간격을 두는지 정의합니다. 이 사례에서 저는 한 달을 간격으로 합니다.포지션 정의 위치는'left','right','bottom','top'4가지이고,grid:false는 격자 레이아웃이 아닙니다.

 {
        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. 정의된 시리즈(series)에서renderer 방법을 정의할 수 있으며, 이 방법에서 스트립 기둥의 색을 바꿀 수 있습니다.

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는 문자가 차트에 표시되는 위치를 변경합니다. 'inside Start','inside End','outside'는 각각 기둥의 시작, 맨 뒤쪽과 밖을 대표한다.다들 직접 해보셔도 돼요.
자바스크립트와 관련된 내용에 관심이 있는 더 많은 독자들은 본 사이트의 주제를 볼 수 있다.《JavaScript 역행 알고리즘과 기교 총결》과 《JavaScript 수학 연산 용법 총결》.
본 논문이 여러분의 JavaScript 프로그램 설계에 도움이 되기를 바랍니다.