Question

以下是我的示例数据：

[
  {
    "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"
                    }
                });

DEMO

Answer 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",
    },
});

<强> DEMO

剑道UI图表X轴以小时为单位

1 个答案: