Extjs Chart数字y轴为整数

时间:2013-10-24 17:13:53

标签: extjs charts extjs4 axis axis-labels

我正在尝试将数字y轴显示为整数...没有运气,总是显示小数。

如果您找到了回复我的方法,请。您可以在此处找到代码以便于测试: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 个答案:

答案 0 :(得分:0)

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

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

然后,您还可以为该轴添加最小和最大配置。例如:

minimum : 0

或在控制器上:

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

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

答案 1 :(得分:0)

我这样做了,花了我一段时间

你必须重新定义整个y轴,重新计算majorunits等。

假设您的图表名为monkeyChart,

构建图表后,只需调用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;
},

当然你必须根据自己的喜好调整数字,例如你想看的间隔(我这样做,所以根据价值可以有不同的密度)

如果你不知道min和max beforhead,你可以只为两者传递undefined,并将一个空对象作为optCfg

试试吧,我很久以前写过这篇文章我现在可能已经错过了什么

答案 2 :(得分:0)

我之前的回答是针对ext js 3.4

如果您同时使用

,则为

majorTickSteps: 1,
minimum: 0,

似乎正在运作

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

答案 3 :(得分:-1)

你可以试试这个:

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

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

检查文档Ext.chart.axis.Numeric和Ext.chart.axis.Axis

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