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月的数据没有某些系列的值。这完全搞乱了图表显示的无法解释的方式：

Chart example

正如您所看到的，9月和10月的数据与json不匹配。十月数据特别奇怪，因为显示了三个值，而只给出了两个值。

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

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

Answer 1

我解决这个问题的方法是循环我的数据并添加0的缺失值。

我认为没有比你自己建议更好的方法了。：（

我在Telerik论坛上找到了关于此问题的a question：

您观察到的行为有望作为分类图表   （条形，区域等）需要一组匹配的数据点（值可以   为null但它应该保留在数据中）。恐怕没有   内置功能，将自动为缺失设置0   值 - 您应该修改数据。

我担心此功能的实施不在我们的直接计划中，但我们可能会考虑将其用于该产品的未来版本。

我没有找到更多最近的信息，但据我所知，这还没有修复。

Answer 2

它＆＃39;看起来我运气不好，我需要修复数据。在我的实际解决方案中，我做的就是服务器端，但对于后人来说，如果有人需要一个纯粹的js修复的kickstart，这就是起点：

function fixData(data) {
    var lookup =[], start = [], name = [], result =[];
    for (i = 0, len = data.length; i < len; ++i) {
        start[data[i].Start] = true;
        name[data[i].Name] = true;
        lookup[data[i].Start + "," + data[i].Name] = data[i].Value;
    }
    for (var currentStart in start) {
        for (var currentName in name) {
            var entry = {Start: currentStart, Name: currentName};
            entry.Value = lookup[currentStart + "," + currentName] || 0;
            result.push(entry);
        }    
    }    
    return result;
}

JSFiddle：http://jsfiddle.net/12ob7qmx/8/

与KendoUI的堆积图

2 个答案: