javascript - Ext JS 6 经典图表 - chop 轴

Question

我创建了一个带有连续数字轴的笛卡尔图 demo 。有没有办法使用相同的数字数据但 chop 图表中较高的 x 轴值？请参阅下面的模型:

Answer 1

这不是一个解决方案，而是一个建议，但太大而无法放入评论中。

您可以像这样设置轴格式:

{
    type: 'numeric',
    position: 'top',
    fields: 'start',
    grid: {
        stroke: '#ccc'
    },
    style: 'font-size:3pt',
    minimum: 0,
    maximum: 16,
    layout: 'continuous',

    renderer: function(axis,label,layoutContext,lastLabel  ) {
        if (label >14){
            label = '<60';
        } else if (label>13){
            label = '<50';
        } else if (label>12){
            label = '<40';
        } else if (label>11){
            label = '<30';
        } else if (label>10){
            label = '<20';
        }
        return label;
    },
    label:{
         fontSize: '10px' 
    }

在数字 10(或您想要的任何其他值)之后，您开始使用渲染函数更改显示值。

在此方法中，您必须修改存储值以匹配图表新值，例如，在下面的记录中:

{
    "stepNum": 4,
    "name": "Test 1",
    "start": 12,
    "closed": 25
}

如果“start”>10且<20，则将其更改为11，如果“start”>20且<30，则将其更改为12，依此类推。 (要更改的是，如果您有权访问或可能有商店中的转换函数，则可以使用 sql )与(“关闭”+“开始”)相同，在这种情况下，“调整后”记录将是:

{
    "stepNum": 4,
    "name": "Test 1",
    "start": 11,
    "closed": 2
}

我希望你明白我试图解释的内容，我的英语不是很好:)