ExtJS 4 Chart: Линия не заботится о точках - PullRequest
Новая
       29

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

1 голос
/ 26 января 2012

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

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

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

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'
    }
  ]
}

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

Привет и спасибо заранее
gilaras

------------------------------------- UPDATE ------ ---------------------------------

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

Так что, похоже, проблема в том, что 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
      }
    }
  ]
}

Кто-нибудь понял, что я могу делать не так?

1 Ответ

3 голосов
/ 26 января 2012

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

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

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

...