具有稀疏数据的Kendo UI柱形图显示不正确

Question

我使用KendoUI来显示柱形图，但是当我有稀疏数据时（每个类别/系列组合都没有数据点），图表完全错误。我希望我做错了！

获取以下数据：

Category   Series   Value
---------------------------
1          Foo      10
2          Foo      12
2          Bar      9

我想创建一个图表：

• 系列已分组，键位于图例
中
• 类别沿x轴显示，按升序排列
• 值是列的高度

如果我生成图表，我会得到以下结果：

此图表有几个问题：

1. 第三个数据点的列（2，Bar， 9 ）在第一列中显示为橙色 - 应位于第二列
2. 首先显示类别2的轴标签 - 应该是第二个
3. 类别1没有轴标签

但是，如果我向数据源添加第4个数据点，则数据显示正确：

Category   Series   Value
---------------------------
1          Foo      10
2          Foo      12
2          Bar      9
1          Bar      7



我有一个JS小提琴，用于说明问题http://jsfiddle.net/blackstarzes/eep2tn2g/1/

为了完整性，我有以下代码：

HTML

<div id="chart"></div>

JS

var dr = [
    {
        "Category": "1",
        "Series": "Foo",
        "Value": 10
    },
    {
        "Category": "2",
        "Series": "Foo",
        "Value": 12
    },
    {
        "Category": "2",
        "Series": "Bar",
        "Value": 9
    },
];

    //Uncomment the following line to see the correct data
    //dr.push({"Category": "1", "Series": "Bar", "Value": 7});

var ds = new kendo.data.DataSource({
    data: dr,
    group: { field: "Series"},
    sort: [{field: "Category", dir: "asc"}]

})

$("#chart").kendoChart({
    dataSource: ds,
    seriesDefaults: {
        type: 'column',
        labels: {
            visible: true,
            template: "#=kendo.format('{0:0}', value)#"
        }
    },
    legend: {
        visible: true,
        position: "bottom"
    },
    series: [{
        field: "Value"}],
    categoryAxis: {
        field: "Category"
    },
    tooltip: {
        visible: true,
        template: "#= dataItem.Series # #= dataItem.Category # #= dataItem.Value #"
    }
});

提前感谢您的帮助！