一个ExtJS图表上更改字段标签(Change field labels on an ExtJS c

2019-10-19 05:25发布

我怎么会去一个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');
    }
},

如果没有此渲染器,标签会是什么样子2000000040000000 。 渲染器转换这些数字为20.0M40.0M 。 所以,你可以写自己的功能改变成任何你想要的标签。

我建议检查出的文档axeslabels 。 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的,但我最终只是fromatting的JSON结果我拉着他们得到了扔到店前。 可能有办法做到这一点使用图表,但这种解决方法是我如何解决它。



文章来源: Change field labels on an ExtJS chart