Change field labels on an ExtJS chart

问题:

How would I go about changing the axes labels in an ExtJS chart? Specifically, I'm brining data in via proxy, and it's populating with the fields as they are labled in the database. I want to customize them, even if they have to be static. Here's the code from the ExtJS site:

 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');
                }
            }
        }]
    }
});

Is this something that's doable by modifying something in the chart?

回答1:

One way to change how the labels are rendered is by giving them a renderer function. You can see an example of this in the code you have in your question, which you took from this example http://docs.sencha.com/extjs/4.2.2/#!/example/charts/StackedBar.html.

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

Without this renderer, the labels would look like 20000000 or 40000000. The renderer converts those numbers into 20.0M and 40.0M. So, you could write your own function to change the labels into whatever you want.

I recommend checking out the docs for axes and 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

回答2:

I don't know if there's a better way to do this using ExtJS, but I ended up just fromatting the JSON results I pulled before they got thrown into the store. There may be a way to do this using the chart, but this workaround was how I solved it.