0

这是我的示例数据：

[
  {
    "EventDate": "2015-06-03T07:00:00Z",
    "Average": 5.4,
    "Minimum": 0,
    "Maximum": 0,
    "WebsiteName": "microsoft.com",
    "PageName": "About"
  },
  {
    "EventDate": "2015-06-03T08:00:00Z",
    "Average": 4.7,
    "Minimum": 0,
    "Maximum": 0,
    "WebsiteName": "microsoft.com",
    "PageName": "About"
  },
  {
    "EventDate": "2015-06-03T09:00:00Z",
    "Average": 5.9,
    "Minimum": 0,
    "Maximum": 0,
    "WebsiteName": "microsoft.com",
    "PageName": "About"
  },
  {
    "EventDate": "2015-06-03T10:00:00Z",
    "Average": 4.2,
    "Minimum": 0,
    "Maximum": 0,
    "WebsiteName": "microsoft.com",
    "PageName": "About"
  },
  {
    "EventDate": "2015-06-03T11:00:00Z",
    "Average": 4.5,
    "Minimum": 0,
    "Maximum": 0,
    "WebsiteName": "microsoft.com",
    "PageName": "About"
  },
  {
    "EventDate": "2015-06-03T12:00:00Z",
    "Average": 4,
    "Minimum": 1,
    "Maximum": 9,
    "WebsiteName": "microsoft.com",
    "PageName": "About"
  },
  {
    "EventDate": "2015-06-03T13:00:00Z",
    "Average": 5,
    "Minimum": 2,
    "Maximum": 8,
    "WebsiteName": "microsoft.com",
    "PageName": "About"
  }
]

我希望我的 x 轴是“EventDate”，我的 y 轴是平均值。但是，我无法让 Kendo UI 图表加载数据。我正在从远程 Web 服务加载数据。数据源如下所示：

            dataSource: {
                transport: {
                    read: {
                        url: "[[myurl-that-returns-the-above-json]]",
                        dataType: "json"
                    }
                },
                sort: {
                    field: "year",
                    dir: "asc"
                }
            },

这是我配置系列的方式：

                    series: [{
                        type: "area",
                        field: "Average",
                        categoryField: "EventDate"
                    }],
                    categoryAxis: {
                        baseUnit: "hours"
                    }

结果图在 x 轴上实际上没有任何内容，而 y 轴具有以下标记： {0,0.2,0.4,0.6,0.8,1,1.2} 。他们似乎是垃圾。Telerik 没有加载基于小时数的数据的示例。

更新：

我将数据类型添加到模式模型中，但没有效果。

                $("#chart").kendoChart({
                    dataSource: {
                      transport: {
                          read: {
                              url: "https://microsoft-apiapp4bf6da9800604266849e3177658fa1d2.azurewebsites.net:443/api/PageLoadMetric?webSiteName=microsoft.com&pageName=About",
                              dataType: "json"
                          }
                      },
                      schema: {
                            model: {
                            fields: {
                              EventDate: {
                                type: "date"
                              }
                            }
                          }
                      }
                    },
                    series: [{
                        type: "area",
                        field: "Average",
                        categoryField: "EventDate"
                    }],
                    categoryAxis: {
                        baseUnit: "hours"
                    }
                });

演示

4

1 回答 1

1

尝试告诉 dataSource EventData 是一个日期类型字段：

var theDataSource = new kendo.data.DataSource({
        data: data,
        schema: {
            model: {
                fields: {
                    EventDate: {
                        type: "date"
                    }
                }
            }
        }       
});

$("#chart").kendoChart({
    dataSource: theDataSource,
    series: [{
        type: "area",
        field: "Average",
        categoryField: "EventDate"
    }],
    categoryAxis: {
        baseUnit: "hours",
    },
});

演示

于 2015-06-04T22:54:21.523 回答