Extjs4图表未绘制正确的数据

发布于 2024-11-16 06:32:46 字数 808 浏览 3 评论 0原文

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

（我尝试使用 type: 'Time' 作为 x 轴，但收到错误“date.getFullYear 不是函数”）

原文

I created a simple line chart in Extjs4 for one of my projects, and the chart is not plotting the right data.

enter image description here

The chart uses the same store as the grid, but not showing the same data. Is there any way to trace the source of the problem, if not fixing it altogether?

The following is the code I use to generate the chart.

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

(I tried using type: 'Time' for the x axis but gets the error "date.getFullYear is not a function" )

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦纸 2024-11-23 06:32:46

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

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 对象并查看内部数据。

For the date.getFullYear() I suspect your date string is not parsable into a Date object. Could you post your other supporting code, ideally the full code of the Store and Grid? If you'd like to use the Time Axis you'll need to convert your date String into a date object via something along the lines of:

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);
          }
      }
   ]

});

For debugging the chart not displaying correctly, I'd place assign your chart object to a var and in Firebug breakpoint after that variable assignment to be able to inspect your chart js object and look at the data inside.

回复收藏 0 原文