Question

使用Ext 4，如何使堆积条形图的标签覆盖整个条形图？我希望我的标签从栏的开头开始并延伸到所有部分，但是目前，如果标签不适合单独的栏的第一部分，它将自动在下一部分/最后一部分开始。

这与Ext.chart.series.bar中的示例中的代码相同，但已更改为使其堆叠。标有“2”的条形不适合第一个绿色部分，因此它会被推到蓝色部分。

enter image description here }）;

var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
    { 'name': 'metric one',   'data':10 },
    { 'name': 'metric two',   'data': 7 },
    { 'name': 'metric three', 'data': 5 },
    { 'name': 'metric four',  'data': 2 },
    { 'name': 'metric five',  'data':27 }
]
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
    type: 'Numeric',
    position: 'bottom',
    fields: ['data'],
    label: {
        renderer: Ext.util.Format.numberRenderer('0,0')
    },
    title: 'Sample Values',
    grid: true,
    minimum: 0
}, {
    type: 'Category',
    position: 'left',
    fields: ['name'],
    title: 'Sample Metrics'
}],
series: [{
    type: 'bar',
    axis: 'bottom',
    highlight: true,
    tips: {
      trackMouse: true,
      width: 140,
      height: 28,
      renderer: function(storeItem, item) {
        this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
      }
    },
    label: {
      display: 'insideStart',
        field: 'data',
        renderer: Ext.util.Format.numberRenderer('0'),
        orientation: 'horizontal',
        color: '#333',
        'text-anchor': 'middle'
    },
    stacked: true,
    xField: 'name',
    yField: ['data', 'data']
}]

Answer 1

您需要以某种形式的比例表达您的数据点。更好的百分比。见下文

var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data', 'data2'],
            data: [
                { 'name': 'metric one',   'data': 10/20,   'data2': 10/20 },
                { 'name': 'metric two',   'data': 7/17,   'data2': 10/17 },
                { 'name': 'metric three', 'data': 5/15,   'data2': 10/15 },
                { 'name': 'metric four',  'data': 2/12,   'data2': 10/12 },
                { 'name': 'metric five',  'data': 27/37,   'data2': 10/37 }
            ]
        });

        Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            animate: true,
            store: store,
            axes: [{
                type: 'Numeric',
                position: 'bottom',
                fields: ['data', 'data2'],
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                title: 'Sample Values',
                grid: true,
                minimum: 0
            }, {
                type: 'Category',
                position: 'left',
                fields: ['name'],
                title: 'Sample Metrics'
            }],
            series: [{
                type: 'bar',
                axis: 'bottom',
                highlight: true,
                tips: {
                  trackMouse: true,
                  width: 140,
                  height: 28,
                  renderer: function(storeItem, item) {
                    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
                  }
                },
                label: {
                  display: 'insideStart',
                    field: 'data',
                    renderer: Ext.util.Format.numberRenderer('0'),
                    orientation: 'horizontal',
                    color: '#333',
                    'text-anchor': 'middle'
                },
                stacked: true,
                xField: 'name',
                yField: ['data', 'data2']
            }]
        });

Answer 2

试试这个。

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

Answer 3

仅当y轴值为整数

时才显示

yAxis: new Ext.chart.NumericAxis({

          displayName: 'Visits',
          labelRenderer: function(v) {
             // return a value only if it is an integer
             if(v.toString().indexOf(".") === -1){
                   return v;
             }
          }
    })

Ext堆积条形图标签

3 个答案: