Extjs 图表数字 y 轴为整数答案

【问题标题】：Extjs Chart numeric y-axis as integerExtjs 图表数字 y 轴为整数
【发布时间】：2013-11-03 12:56:58
【问题描述】：

我正在尝试将数字 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',
    }]
});

【问题讨论】：

标签： extjs charts extjs4 axis axis-labels

【解决方案1】：

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

如果你同时使用这两种情况

majorTickSteps: 1,
minimum: 0,

似乎工作

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

【讨论】：

【解决方案2】：

尝试在您的 Numeric 轴上添加以下内容：

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

然后，您还可以为该轴添加最小和最大配置。示例：

minimum : 0

或在控制器上：

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

值取决于您的数据或显示偏好。

【讨论】：

这几乎是正确的，但是如果我将数据集更改为 4 和 3 左右的数字，它将重复数字。 jsfiddle.net/4uY7H/4 ...有什么想法可以避免这种情况吗？

【解决方案3】：

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

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

假设您的图表名为 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 之前你可以只传递 undefined 和一个空对象作为 optCfg

试试看，我很久以前写的，现在可能错过了什么

【讨论】：

【解决方案4】：

你可以试试这个：

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

【讨论】：

我试过那个，但如果你注意到它在重复整数（这是不受欢迎的）......我一直在玩majorTickSteps、minumumTickSteps、最小值和最大值，但没有运气......