javascript - 如何获得带有单个条的 ExtJS 4.1.X 条形图以正确显示该条的标签？

Question

如果您尝试以下文档中的实时代码示例：

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.chart.series.Bar

不止一个标签看起来很漂亮：

data: [
    { 'name': 'metric one',  'data':5 },
    { 'name': 'metric two',  'data':27 }
]

但是，一旦您将数据集减少到一个标签，输出看起来很糟糕（请注意，条形图的标签出现在图表区域顶部的一半之外，而不是与要标注的条形垂直对齐）：

这是 ExtJS 中的错误吗？我该如何解决这个问题？产生此输出的确切 ExtJS 代码：

var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data'],
    data: [
        { 'name': 'metric one',  'data':5 }
    ]
});

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: 'insideEnd',
            field: 'data',
            renderer: Ext.util.Format.numberRenderer('0'),
            orientation: 'horizontal',
            color: '#333',
            'text-anchor': 'middle'
        },
        xField: 'name',
        yField: 'data'
    }]
});

Answer 1

一种解决方案是更换

axisRange = to - from,

在 ExtJS中Axis.js的第383行

axisRange = to - from == 0 ? 1 : to - from,

以防止将除以零分配给y轴标签的坐标。

Answer 2

如果看起来正确，只需将高度从 300 更改为 150 ：

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 150,

Answer 3

是的，当它只有一条记录时，默认渲染看起来确实很奇怪。
它可以修复或解决。

在概念上，覆盖系列渲染器以在单个记录的情况下修复高度和 y 点 -

renderer: function(sprite, record, attr, index, store) {
    if (store.getCount() == 1) {
        attr.height = 80;
        attr.y = 75;
    }
    return attr;
}

您可以更改实际覆盖的值 ( attr.height and attr.y) 以满足您的视觉需求。

这是修改后的示例，使其看起来接近您的预期。

var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data'],
    data: [
        {'name': 'metric one','data': 5}
        //,{'name': 'metric two','data': 7}
    ]
});


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: 'insideEnd',
            field: 'data',
            renderer: Ext.util.Format.numberRenderer('0'),
            orientation: 'horizontal',
            color: '#333',
            'text-anchor': 'middle'
        },
        xField: 'name',
        yField: 'data',
        renderer: function(sprite, record, attr, index, store) {
            if (store.getCount() == 1) {
                attr.height = 80;
                attr.y = 75;
            }
            return attr;

        }}]
});​

Answer 4

问题不在一根柱子上，而是因为范围，所以如果你有一个很宽的范围并且一根柱子标签不会重复，很高兴听到它在 4.2 版中已修复，如果你尝试，请确认这一点。

Answer 5

更新到 ExtJS 4.2 应该可以解决这个问题。