Настройка этикетки в стек Гистограмма ExtJS

Question

я сделать столбцы диаграммы, как это, но это делают несоответствие, когда данные являются низкими, что время мне нужно отобразить находящиеся Ot диаграммы как

является это можно сделать за пределами метки в ExtJS сложенных колонок графика ..

код здесь

ar store = Ext.create('Ext.data.JsonStore', { 
    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], 
    data: [ 
     { 'name': 'metric one', 'data1': 4, 'data2': 12, 'data3': 14, 'data4': 8, 'data5': 13 }, 
     { 'name': 'metric two', 'data1': 7, 'data2': 8, 'data3': 16, 'data4': 10, 'data5': 3 }, 
     { 'name': 'metric three', 'data1': 5, 'data2': 2, 'data3': 14, 'data4': 12, 'data5': 7 }, 
     { 'name': 'metric four', 'data1': 2, 'data2': 14, 'data3': 6, 'data4': 1, 'data5': 4}, 
     { 'name': 'metric five', 'data1': 7, 'data2': 4, 'data3':4, 'data4': 13, 'data5': 4 } 
    ] 
}); 

Ext.create('Ext.chart.Chart', { 
    renderTo: Ext.getBody(), 
    width: 500, 
    height: 300, 
    animate: true, 
    store: store, 
    axes: [ 
     { 
      type: 'Numeric', 
      position: 'left', 
      fields: ['data1', 'data2', 'data3'], 
      label: { 
       renderer: Ext.util.Format.numberRenderer('0,0') 
      }, 
      title: 'Sample Values', 
      grid: true, 
      minimum: 0 
     }, 
     { 
      type: 'Category', 
      position: 'bottom', 
      fields: ['name'], 
      title: 'Sample Metrics' 
     } 
    ], 
    series: [ 
     { 
      type: 'column', 
      axis: 'left', 
      highlight: true, 

      label: { 
       display: 'middle', 
       'text-anchor': 'middle', 
       field: ['data1', 'data2', 'data3'], 
       renderer: Ext.util.Format.numberRenderer('0'), 
       orientation: 'horizontal', 
       contrast: true, 
       color: '#333' 
       field: ['data1', 'data2', 'data3'], 


      }, 
stacked: true, 
      xField: 'name', 
      yField: ['data1', 'data2', 'data3'] 
     } 
    ] 
}); 

Answer 1

Я не уверен в правильности, но, используя этот код, ваши данные будут отображаться на диаграмме, и если значение диаграммы будет высоким, данные будут идти по диаграмме, а также будут отображаться данные по оси Y и оси X на мыши Hover.

|-----|                 
    | 89 |     50            
    |  |  20  |-----|            
    |  | |-----| |  |            
    |  | |  | |  |            
    |  | |  | |  |            
    |  | |  | |  | 

---

Мой код (я использую ExtJS 4.0 диаграмму в ExtJS 3.4, так что мне нужно "Ext-все-sandbox.js")

Ext4.create('Ext4.chart.Chart',{ 
renderTo: 'divAverageChart2', 
width: 450, 
height: 380, 
style: 'background:#fff', 
animate: true, 
store: AverageChart2Store, 
    items: [{ 
     type : 'text', 
     cls:'bold', 
    // text : 'Performance Matrix of Student Mayur Macwan Grade : 5th', 
     font : '14px Calibri', 
     width : 100, 
     height: 30, 
     x : 80, //the sprite x position 
     y : 370 //the sprite y position 
    }], 
    legend: { 
     position: 'bottom', 
     labelFont: 'tahoma' 
    }, 
axes: [{ 
    type: 'Numeric', 
    position: 'left', 
    minimum: 0,         
    fields: ['data1'],  
    label: { 
     renderer: Ext.util.Format.numberRenderer('0') 
    } 
},{ 
    type: 'Category', 
    position: 'bottom',     
    fields: ['name']     
}], 
series: [{ 
    type: 'column', 
    axis: 'left', 
    showInLegend: false, 
    xField: 'name',    
    yField: ['data1'], 
    title: ['Top 5 Products'], 
    label: { 
     display: 'outside', 
     'text-anchor': 'middle', 
     field: ['data1','data2','data3','data4'], 
     renderer: Ext.util.Format.numberRenderer('0,0'), 
     orientation: 'horizontal', 
     color: '#333' 
    },    
    tips: { 
     trackMouse: true, 
     width: 140, 
     height: 28, 
     renderer: function(storeItem, item) {      
     this.setTitle(item.value); 
     } 
    } 
}], 
    listeners: { 
     afterrender: function(view){ 
      Ext.each(view.legend.items, function(item) { 
       item.un("mousedown", item.events.mousedown.listeners[0].fn); 
      }) 
     } 
    } 
}); 

Другой способ (Это работает для меня)

<text id="ext-sprite-1222" style="font: 11px Helvetica,sans-serif;" zIndex="0" font="11px Helvetica, sans-serif" fill="#333" text-anchor="middle" text="37" x="110.206" y="228" transform="matrix(1,0,0,1,0,0)" hidden="false"> 
<tspan x="171.206" dy="3.5">37</tspan> 
</text> 

Здесь вы должны изменить X -axis и значение оси Y в соответствии с вашими потребностями.

изменить значение оси X и значение dy в нижнем коде согласно вашему коду потребности.

<tspan x="171.206" dy="3.5">37</tspan>