自定义堆积柱形图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>