extjs - 積み上げ縦棒グラフextjsのラベルをカスタマイズする

Question

このような縦棒グラフを作成しますが、データが少ない場合は不一致になります。そのときは、次のようにグラフの外に表示する必要があります

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 軸のデータも表示されます。

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

---

私のコード(extjs 3.4 で extjs 4.0 チャートを使用しているため、「ext-all-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 軸と Y 軸の値を変更する必要があります。

必要なコードに従って、以下のコードで X 軸と dy の値を変更します。

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