更改ExtJS图表上的字段标签 [英] Change field labels on an ExtJS chart

问题描述

如何更改ExtJS图表中的轴标签？具体来说，我正在通过代理数据，它填充的字段，因为它们在数据库中标记。我想自定义它们，即使他们必须是静态的。这里是ExtJS网站的代码：

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?

推荐答案

改变标签渲染方式的一种方法是给它们一个渲染器函数。您可以在问题中的代码中看到此示例，您从此示例中取得了 http://docs.sencha.com/extjs/4.2.2/#!/example/charts/StackedBar.html 。

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

没有这个渲染器，标签看起来像 20000000 或 40000000 。渲染器将​​这些数字转换为 20.0M 和 40.0M 。

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.

我建议检查 axes 的文档$ c>和标签。
http：// docs。 sencha.com/extjs/4.22/#!/api/Ext.chart.axis.Axis
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.chart.Label

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

这篇关于更改ExtJS图表上的字段标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！