Линейная диаграмма, не соединяющая точки (пакет Sencha-Charts)

Question

У меня возникли проблемы с компонентом картезианской диаграммы extjs, из-за которого он не может провести линию между двумя точками. Я сузил проблему до пропущенных интервальных данных для шага в определенной серии, но не нашел хорошего решения.

В следующем упрощенном примере вы увидите разрыв красной линии, где существуют данные для маркера на синей линии с интервалом "три", который находится между двумя красными маркерами. Я пытаюсь найти способ рисовать прямо от красного маркера с интервалом "два" до маркера с интервалом "четыре" в сценарии, где существуют только частичные данные для 1 или более шагов в нескольких сериях.

В моем прямом приложении данные вдоль оси x на самом деле являются датами, поэтому ожидать данных на каждом интервале для каждой серии нецелесообразно. Я также неохотно подделываю точки, где данных не существует, поскольку маркеры имеют значение, и я делаю с ними другие вещи в click-событиях.

Глядя на API, моя единственная линия исследования, кажется, перегружает серию renderer функции, но пока, я не выяснил, что вызывает ничью, так как документация в лучшем случае скудна.

Буду признателен за любые указания, прежде чем я начну разбирать структуру, если кто-то уже справился с этим? Или - проверка работоспособности - я пропустил какое-то явно очевидное свойство конфигурации?

"Пожалуйста, возьми

Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    layout: 'fit',
    items: {
        xtype: 'cartesian',
        store: {
          fields: ['name', 'p1', 'p2'],
          data: [
              { name: 'one',   p1: 10, p2: 3  },
               { name: 'two',  p1: 7,  p2: 5  },
              { name: 'three', /*p1: 5,*/  p2: 10 },
              { name: 'four',  p1: 2,  p2: 8  },
              { name: 'five',  p1: 18, p2: 15 }
          ]
        },
        axes: [
            {
                type: 'numeric',
                position: 'left',
                fields: ['p1', 'p2'],
                minimum: 0
            }, 
            {
                type: 'category',
                position: 'bottom',
                fields: ['name']
            }
        ],
        series: [ 
            {
                type: 'line',
                style: {
                    lineWidth: 3
                },
                xField: 'name',
                yField: 'p1',
                marker: 'circle',
                colors: ['red']
            },
            {
                type: 'line',
                style: {
                    lineWidth: 3
                },
                xField: 'name',
                yField: 'p2',
                marker: 'circle',
                colors: ['blue']
            }
        ]
    }
});

Answer 1

К сожалению, поведение, к которому вы стремитесь, не настраивается. Однако с этим всегда можно что-то сделать. В этом случае вы могли бы реализовать convert метод для p1 поле.

Логика будет находить предыдущие и следующие действительные данные, а затем вычислять из них интерполяцию, чтобы график был удовлетворен.