Ext JS 6 Classic Chart - Усеченная ось

Question

Я создал декартову граф с непрерывной числовой осью, demo .Есть ли способ использовать те же числовые данные, но обрезать более высокие значения оси 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
}

Если «начало»> 10 и <20, измените его на 11, если «начало»> 20 и <30, измените его на 12 и т. д.(чтобы изменить то, что вы могли бы работать с SQL, если у вас есть доступ или, возможно, функция преобразования в магазине) то же самое с («закрыто» + «старт»), в этом кенарио «скорректированная» запись будет: </p>

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

Надеюсь, вы понимаете, что я пытался объяснить, мой английский не очень хорош :)