Extjs图数字y轴为整数。

I'm trying to display the numeric y-axis as integer... without luck, always shows decimals.

我试图将数字y轴显示为整数…没有运气，总是显示小数。

Please if you found a way to do this reply to me. You can find the code here for easy testing: http://jsfiddle.net/adriansky/4uY7H/

如果你找到了一个方法来回复我。您可以在这里找到易于测试的代码:http://jsfiddle.net/adriansky/4uY7H/。

var store1 = Ext.create('Ext.data.Store', {
    fields: ['name', {name: 'people', type: 'integer' }],
    data:[
        {"name":"jan",  "people":13},
        {"name":"feb",  "people":12},
        {"name":"mar",  "people":12},
        {"name":"apr",  "people":13},
        {"name":"may",  "people":12},
        {"name":"june", "people":13}
    ]
});

var chart = Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: '80%',
    height: '80%',
    store: store1,
    axes: [{
        type: 'Numeric',
        position: 'left',
        fields: ['people'],
    }, {
        type: 'Category',
        position: 'bottom',
        fields: ['name'],
    }],
    series: [{
        type: 'line',
        axis: 'left',
        xField: 'name',
        yField: 'people',
    }]
});

4 个解决方案

#1

I did this, it took me a while

我做了这个，花了我一段时间。

you have to redefine the whole y-axis, recalculate majorunits etc..

你必须重新定义整个y轴，重新计算主要单位等等。

lets assume your chart is called monkeyChart,

假设你的图表叫做monkeyChart，

once your chart is built, just call monkeyChart.setYAxis(..)

一旦建立了图表，就调用monkeyChart.setYAxis(..)

monkeyChart.setYAxis(createNumericAxis(min, max, optCfg));



createNumericAxis: function(start, end, optCfg) {
    var cfg = {
        majorUnit: calculateMajorUnit(start, end)
    };
    Ext.apply(cfg, optCfg)
    return new Ext.chart.NumericAxis(cfg);
},

calculateMajorUnit: function(min, max){
    if(min == undefined) min = 0;
    if(max == undefined) max = 20;
    var dif = max - min;
    var interval = dif / 20;
    var intervals = [1,2,5,10,20,50,100,200,500];
    for (var i = 0; i < intervals.length; i++) {
        if(interval <= intervals[i]){
            interval = intervals[i];
            break;
        }
    }
    return interval;
},

of course you have to adjust the numbers as you like, eg the intervals you want to see (I did this way so I can have a different density depending on the values)

当然，你需要根据你喜欢的时间来调整数字(我这样做是为了让我有不同的密度，这取决于数值)

also if you don't know min and max beforhead you can just pass undefined for both, and an empty object as optCfg

另外，如果您不知道min和max beforhead，您可以对两者都进行未定义，并将一个空对象作为optCfg。

give it a try, I wrote it long time ago I might have missed something now

试一下吧，我很久以前就写过了，现在可能漏掉了什么。

#2

Try to add the following on your Numeric axes:

尝试在数字轴上添加以下内容:

label: {
    renderer: function (v) {
        return v.toFixed(0); 
    }
}

Then, you can also add the minimum and maximum config for that axes. Example:

然后，还可以为该轴添加最小和最大配置。例子:

minimum : 0

Or on controller:

或控制器:

myChart.axes.items[0].maximum = NaN;
myChart.axes.items[0].minimum = 0;

Values depend on your data or your display preferences.

值取决于您的数据或显示首选项。

#3

my previous answer was for ext js 3.4

我之前的回答是ext js 3.4。

in your case if you use both

在你的情况下，如果你两者都使用。

majorTickSteps: 1,
minimum: 0,

seems working

似乎工作

http://jsfiddle.net/alezx/vu5pL/

#4

-1

You can try this:

你可以试试这个:

http://jsfiddle.net/4uY7H/2/

axes: [{
    type: 'Numeric',
    position: 'left',
    fields: ['people'],
    decimals: 0,
    majorTickSteps: 1,
}, {
    type: 'Category',
    position: 'bottom',
    fields: ['name'],
}],

check the doc for Ext.chart.axis.Numeric and Ext.chart.axis.Axis

检查doc的Ext.chart.axis。数字和Ext.chart.axis.Axis

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.chart.axis.Axis

http://docs.sencha.com/extjs/4.2.2/ # ! / api / Ext.chart.axis.Axis

#1