javascript - 使用 KendoUI 的堆积图

Question

我正在尝试使用 kendo ui 在堆叠图中显示数据。这是我的代码:

var data = [
    // June
    { Start: "2014-06-01T00:00:00", Name : "Series 1", Value: 1 },
    { Start: "2014-06-01T00:00:00", Name : "Series 2", Value: 2 },
    { Start: "2014-06-01T00:00:00", Name : "Series 3", Value: 10 },

    // July
    { Start: "2014-07-01T00:00:00", Name : "Series 1", Value: 2 },
    { Start: "2014-07-01T00:00:00", Name : "Series 2", Value: 2 },
    { Start: "2014-07-01T00:00:00", Name : "Series 3", Value: 2 },

    // August
    { Start: "2014-08-01T00:00:00", Name : "Series 1", Value: 3 },
    { Start: "2014-08-01T00:00:00", Name : "Series 2", Value: 2 },
    { Start: "2014-08-01T00:00:00", Name : "Series 3", Value: 1 },

    // September
    { Start: "2014-09-01T00:00:00", Name : "Series 2", Value: 2 },
    { Start: "2014-09-01T00:00:00", Name : "Series 3", Value: 3 },

    // October
    { Start: "2014-10-01T00:00:00", Name : "Series 1", Value: 1 },
    { Start: "2014-10-01T00:00:00", Name : "Series 3", Value: 3 }

]

var stocksDataSource = new kendo.data.DataSource({
    data: data,
    group: {
        field: "Name"
    },
    sort: [{ field: "Start", dir: "asc"} ]
});

function createChart() {
    $("#chart").kendoChart({
        dataSource: stocksDataSource,
        series: [{
            type: "column",
            field: "Value",
            name: "#= group.value #",
            stack: true,
            tooltip: {
                template: "#=kendo.toString(new Date(category), 'd MMM yyyy')#<br/>" +
                "#=dataItem.Name#<br/>"+
                "Value: #=dataItem.Value#",
                visible: true                
            },
        }],
        categoryAxis: {
            field: "Start",
            type: "date",
            labels: {
                format: "MMM"
            }
        }
    });
}

$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);

请注意，9 月和 10 月的数据没有某些系列的值。这以完全无法解释的方式完全搞砸了图表显示:

如您所见，9 月和 10 月的数据与 json 不匹配。 10 月份的数据尤其奇怪，因为显示了三个值，而只给出了 2 个值。

这是 JSFiddle:http://jsfiddle.net/12ob7qmx/6/

我可以设置图表上的任何设置以使其正常工作，还是我必须循环遍历数据集并用零值填充缺失数据？

Answer 1

我解决这个问题的方法是遍历我的数据并添加带有 0 的缺失值。

我认为没有比您自己建议的更好的方法了。 :(

我找到了 a question关于 Telerik 论坛上的这个问题:

The behavior you have observed is expected as the categorical charts (bar, area etc.) require a matching set of data points (the value can be null but it should persist in the data). I am afraid there is no built-in functionality which will automatically set 0 for the missing values - you should modify your data.

I am afraid the implementation of this functionality is not in our immediate plans, however we may consider it for future versions of the product.

我还没有找到更多最新信息，但据我所知，这个问题还没有得到解决。