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

Kendo UI Chart X-Axis in hours

本文关键字：小时为单位 UI 图表剑道更新时间：2023-09-26

以下是我的示例数据:

[
  {
    "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轴是平均。但是，我无法获得剑道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"
                    }
                });

演示

尝试告诉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",
    },
});