ExtJS 4图表：线不关心点

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

有人能发现我的错误吗？我似乎找不到它，在我看来，它看起来就像文档中的示例一样......

谢谢，提前感谢
吉拉拉斯

--------------------------------------更新-------- -------------------------------------------

我想我知道问题出在哪里，但我不知道如何解决：-/
当我向商店添加更多数据时，图表如下所示：

所以问题似乎是 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 说配置需要一个字符串，而实际上它需要一个字符串或一个字符串数组。在您的情况下，请使用axis: ['left', 'bottom']。

其次（我对此不太确定），您可以尝试在图表配置中使用完全限定的商店名称。因此，'MR.store.ResultChartStore' 而不仅仅是'ResultChartStore'。尽管您似乎得到了很好的分数，但如果出现某种副作用，我不会感到惊讶。

第三，时间轴可能有点问题。如果您遇到问题，请尝试将其设置为“类别”并将日期转换为字符串。上面提到的问题确实指出类别轴也有问题，但我个人没有遇到任何问题。