Ext 기둥 모양도

var store = Ext.create('Ext.data.JsonStore', {
    fields: ["finish_value","status","base_code","score","dept_name","index_unit","id","index_name","dept_id","index_code","index_weight","base_name","index_goal"],
    totalProperty : 'totalProperty',
	autoDestroy: true,
	autoLoad: true,
	proxy: {
        type: 'ajax',
        url: 'LeaderShow.do?method=getLeaderShow&index_code=0461c13d5f8e431e978969c98af8afb0&base_code=201200&check_type=1',
        reader: {
            type: 'json',
            root: 'images',
            idProperty: 'name'
        }
    }
});
Ext.onReady(function() {
    var panel3 = Ext.create('widget.panel', {
        width: 600,
        height: 300,
        title: 'ExtJS.com Visits Trends, 2007/2008 (Full styling)',
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: {
            xtype: 'chart',
            animate: false,
            store: store,
            insetPadding: 30,
            gradients: [{
              angle: 90,
              id: 'bar-gradient',
              stops: {
                  0: {
                      color: '#99BBE8'
                  },
                  70: {
                      color: '#77AECE'
                  },
                  100: {
                      color: '#77AECE'
                  }
              }
            }],
            axes: [{
                type: 'Numeric',
                minimum: 0,
                maximum: 100,
                position: 'left',
                fields: ["finish_value"],
                grid: true,
                label: {
                    font: '10px Arial'
                },
                title:' '
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['dept_name'],
                title:' ',
                grid: true/*,
                label: {
                    font: '11px Arial',
                    renderer: function(name) {
                        return name.substr(0, 3);
                    }
                }*/
            }],
            series: [{
                type: 'column',
                axis: 'left',
                xField: 'dept_name',
                yField: 'finish_value',
                style: {
                    fill: 'url(#bar-gradient)',
                    'stroke-width': 3
                },
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0,
                    fill: '#38B8BF',
                    stroke: '#38B8BF'
                },
                tips: {
                    trackMouse: true,
                    width: 100,
                    height: 130,
                    renderer: function(storeItem, item) {
	                        var dept_name = storeItem.get('dept_name');
							var index_name = storeItem.get('index_name');
							var base_name = storeItem.get('base_name');
							var index_goal = storeItem.get('index_goal');
							var index_unit = storeItem.get('index_unit');
							var finish_value = storeItem.get('finish_value');
							var index_weight = storeItem.get('index_weight');
							var score = storeItem.get('score');
							this.setTitle(" :"+dept_name+"</br> :"+index_name+"</br> :"+base_name+"</br> :"+index_goal+"</br> :"+index_unit+"</br> :"+finish_value+"</br> :"+index_weight+"</br> :"+score);
                    }
                }
            }/*, {
                type: 'line',
                axis: 'left',
                xField: 'dept_name',
                yField: 'finish_value'
            }*/]
        }
    });
    
});