更改ExtJS图表上的字段标签

更改ExtJS图表上的字段标签,extjs,charts,extjs4,label,extjs4.2,Extjs,Charts,Extjs4,Label,Extjs4.2,如何更改ExtJS图表中的轴标签?具体来说,我通过代理将数据引入,并在数据库中标记字段时填充这些字段。我想定制它们,即使它们必须是静态的。以下是ExtJS站点的代码: var panel1 = Ext.create('widget.panel', { width: 800, height: 400, title: 'Stacked Bar Chart - Movies by Genre', renderTo: Ext.getBody(), layout:

如何更改ExtJS图表中的轴标签?具体来说,我通过代理将数据引入,并在数据库中标记字段时填充这些字段。我想定制它们,即使它们必须是静态的。以下是ExtJS站点的代码:

 var panel1 = Ext.create('widget.panel', {
    width: 800,
    height: 400,
    title: 'Stacked Bar Chart - Movies by Genre',
    renderTo: Ext.getBody(),
    layout: 'fit',
    items: {
        xtype: 'chart',
        animate: true,
        shadow: true,
        store: store,
        legend: {
            position: 'right'
        },
        axes: [{
            type: 'Numeric',
            position: 'bottom',
            fields: ['comedy', 'action', 'drama', 'thriller'], // Need custom values here
            title: false,
            grid: true,
            label: {
                renderer: function(v) {
                    return String(v).replace(/000000$/, 'M');
                }
            },
            roundToDecimal: false
        }, {
            type: 'Category',
            position: 'left',
            fields: ['year'],
            title: false
        }],
        series: [{
            type: 'bar',
            axis: 'bottom',
            gutter: 80,
            xField: 'year',
            yField: ['comedy', 'action', 'drama', 'thriller'],
            stacked: true,
            tips: {
                trackMouse: true,
                width: 65,
                height: 28,
                renderer: function(storeItem, item) {
                    this.setTitle(String(item.value[1] / 1000000) + 'M');
                }
            }
        }]
    }
});

通过修改图表中的某些内容,这是可行的吗?

更改标签渲染方式的一种方法是为标签提供渲染器功能。您可以在问题中的代码中看到这方面的示例,该代码取自此示例

如果没有此渲染器,标签将看起来像
20000000
40000000
。渲染器将这些数字转换为
20.0M
40.0M
。因此,您可以编写自己的函数来将标签更改为您想要的任何内容

我建议查看
标签
的文档。

我不知道是否有更好的方法使用ExtJS实现这一点,但我只是在将JSON结果放入存储之前对其进行了添加。也许有一种方法可以通过图表来实现这一点,但这是我解决问题的方法。

你到底想做什么?其中一个轴上已经有标签的渲染器。这不是你想要的方式吗?这是他们在ExtJS文档中给出的默认示例。现在看左边,标签是从数据中指定的“年”数组填充的。我希望能够完全改变这些。例如,虽然有点傻,但我想做一些像Map2008这样的事情,它当前显示为“Two000andEight”,并将其作为标签。有一个更好的方法。请参阅我的答案。
label: {
    renderer: function(v) {
        return String(v).replace(/(.)00000$/, '.$1M');
    }
},