ExtJS 4 Chart: Линия не заботится о точках

Question

Я хочу использовать диаграмму в своем новом приложении ExtJS4.
Оси выглядят отлично, и я тоже получаю линию; но это не имеет никакого смысла. Вот скриншот моей проблемы:

Итак, как вы можете видеть, я получил оси только хорошо, и данные, оставшиеся от графика, должны быть нарисованы; но очевидно, что это на самом деле не делать то, что я ожидал ;-)

Я пытался жёстко данные, так вот мой магазин:

Ext.define('MR.store.ResultChartStore', { 
extend: 'Ext.data.Store', 
model: 'MR.model.ResultPoint', 
data: [ 
    {rings: 400, date: new Date(1970, 1, 1)}, 
    {rings: 398, date: new Date(1970, 1, 2)}, 
    {rings: 275, date: new Date(1970, 1, 3)} 
] 
}); 

ссылаются, модель выглядит следующим образом:

Ext.define('MR.model.ResultPoint', { 
extend: 'Ext.data.Model', 
fields: ['rings', 'date'] 
}); 

И, наконец, моя диаграмма выглядит следующим образом:

{ 
    xtype: 'chart', 
    width: 600, 
    height: 300, 
    theme: 'Green', 
    store: 'ResultChartStore', 
    axes: [ 
    { 
     title: 'Ringe', 
     type: 'Numeric', 
     position: 'left', 
     fields: ['rings'], 
     minimum: 0, 
     maximum: 400 
    }, 
    { 
     title: 'Datum', 
     type: 'Time', 
     position: 'bottom', 
     fields: ['date'], 
     dateFormat: 'd.m.Y' 
    } 
    ], 
    series: [ 
    { 
     type: 'line', 
     xField: 'date', 
     yField: 'rings' 
    } 
    ] 
} 

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

Greetz и заранее спасибо
gilaras

-------- -----------------------------ОБНОВИТЬ-------------------- -------------------

Я думаю, я знаю, где проблема, но я не знаю, как ее решить: -/
Когда я добавьте больше данных в магазин, диаграмма выглядит так:

Таким образом, проблема заключается в том, что Ext не «знает», как подключить мои точки ...
По моему мнению, он находит точку, рисует линию через нее и повторяет ее для каждой точки, указанной в моем магазине.

Мой график будет выглядеть так:

{ 
    xtype: 'chart', 
    width: 600, 
    height: 300, 
    theme: 'Base', 
    store: 'ResultChartStore', 
    axes: [ 
    { 
     title: 'Ringe', 
     type: 'Numeric', 
     position: 'left', 
     fields: ['rings'], 
     minimum: 0, 
     maximum: 400, 
     minorTickSteps: 1, 
     grid: { 
     odd: { 
      opacity: 1, 
      fill: '#ddd', 
      stroke: '#bbb', 
      'stroke-width': 0.5 
     } 
     } 
    }, 
    { 
     title: 'Datum', 
     type: 'Time', 
     position: 'bottom', 
     fields: ['date'], 
     dateFormat: 'd' 
    } 
    ], 
    series: [ 
    { 
     type: 'line', 
     xField: 'date', 
     yField: 'rings', 
     highlight: { 
     size: 7, 
     radius: 7 
     }, 
     markerConfig: { 
     type: 'cross', 
     size: 4, 
     radius: 4, 
     'stroke-width': 0 
     } 
    } 
    ] 
} 

Каждый получил представление о том, что я могу делать неправильно?

Answer 1

Во-первых, вам не хватает важной конфигурации в вашей серии. Конфигурация axis связывает точки в вашем магазине с осями на диаграмме. Однако документация Sencha на эту конфигурацию вводит в заблуждение; Sencha говорит, что config принимает строку, когда на самом деле она берет либо строку, либо массив строк. В вашем случае используйте axis: ['left', 'bottom'].

Второй (и я менее уверен в этом), вы можете попробовать использовать полное имя магазина в конфигурации диаграммы. Итак, 'MR.store.ResultChartStore' вместо 'ResultChartStore'. Хотя вы, кажется, получаете очки просто отлично, я не удивлюсь, если будет какой-то побочный эффект.

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