Extjs4 图表未绘制正确的数据答案

【问题标题】：Extjs4 chart not plotting correct dataExtjs4 图表未绘制正确的数据
【发布时间】：2011-09-18 00:57:02
【问题描述】：

我在 Extjs4 中为我的一个项目创建了一个简单的折线图，但该图表未绘制正确的数据。

图表使用与网格相同的存储，但显示的数据不同。如果不能完全解决问题，有什么方法可以追踪问题的根源？

以下是我用来生成图表的代码。

{
    xtype: 'chart',
    animate: true,
    shadow: true,
    store: 'Dataalls',
    legend: {
        position: 'top'
    },
    axes: [{
        type: 'Numeric',
        position: 'left',
        title: 'Wind Speed',
        fields: ['windspeed'],
        grid: true
    }, {
        type: 'Category',
        position: 'bottom',
        title: 'Time',
        fields: ['time']
    }],
    series: [{
        type: 'line',
        axis: 'left',
        xField: ['time'],
        yField: ['windspeed']
    }]
}

（我尝试在 x 轴上使用 type: 'Time' 但得到错误“date.getFullYear 不是函数”）

【问题讨论】：

标签： javascript extjs extjs4 extjs-mvc

【解决方案1】：

对于 date.getFullYear() 我怀疑您的日期字符串无法解析为 Date 对象。您能否发布您的其他支持代码，最好是 Store 和 Grid 的完整代码？如果您想使用时间轴，您需要通过以下方式将日期字符串转换为日期对象：

Ext.define('Your.Model', {
   extend: 'Ext.data.Model',
   fields: [
      {name: 'dateString', type: 'string'},
      {name: 'date',
          convert: function(value, record) {
              year = value.substring(0,4);
              month = value.substring(5,7).replace(/^[0]+/g,"");
              day = value.substring(8,10).replace(/^[0]+/g,"");
              hour = value.substring(11,13).replace(/^[0]+/g,"");
              // etc for min, sec, millis
              return new Date(year, (month - 1), day, hour, 0, 0);
          }
      }
   ]

});

为了调试图表显示不正确，我会将您的图表对象分配给一个 var 并在该变量分配之后的 Firebug 断点中，以便能够检查您的图表 js 对象并查看其中的数据。

【讨论】：

【解决方案2】：

我在使用 Time 时遇到了类似的问题。只需通过定义我的模型字段类型来修复它：

字段：[{name: 'date', type: 'Date'}, {name: 'close',type:'float'}]

至于为什么你的图表是这样绘制的，我之前也知道，我意识到 json 将它作为字符串传递，所以我也需要定义为浮点数。我在 php 端做了一个修复，在我将它作为 json 传递之前，先强制它作为一个浮点数。

【讨论】：