Question

如何更改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');
                }
            }
        }]
    }
});

这可以通过修改图表中的某些内容来实现吗？

Answer 1

更改标签呈现方式的一种方法是为其提供渲染器功能。您可以在问题代码中看到此示例，您可以从此示例http://docs.sencha.com/extjs/4.2.2/#!/example/charts/StackedBar.html中获取该代码。

label: {
    renderer: function(v) {
        return String(v).replace(/(.)00000$/, '.$1M');
    }
},

如果没有此渲染器，标签将显示为20000000或40000000。渲染器会将这些数字转换为20.0M和40.0M。因此，您可以编写自己的函数将标签更改为您想要的任何内容。

我建议您查看axes和labels的文档。 http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.chart.axis.Axis http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.chart.Label

Answer 2

我不知道是否有一种更好的方法可以使用ExtJS来做到这一点，但我最终只是把它在被扔到商店之前拉出的JSON结果。可能有一种方法可以使用图表来完成此操作，但这种解决方法就是我如何解决它。

更改ExtJS图表上的字段标签

2 个答案: