Question

我正在尝试将kendo图表绑定到远程json数据。

我有一个我创建的示例。

我不知道为什么图表显示不正确，在这个例子中轴的排序搞砸了。

var data = [   
{"Name":1,"Year":2011,"Expense":200.00},
{"Name":1,"Year":2012,"Expense":274.91},
{"Name":1,"Year":2013,"Expense":0},
{"Name":1,"Year":2014,"Expense":0},

{"Name":5,"Year":2011,"Expense":100.00},
{"Name":5,"Year":2012,"Expense":315.84},
{"Name":5,"Year":2013,"Expense":0},
{"Name":5,"Year":2014,"Expense":0},

{"Name":6,"Year":2011,"Expense":100.00},
{"Name":6,"Year":2012,"Expense":0},
{"Name":6,"Year":2013,"Expense":200},
{"Name":6,"Year":2014,"Expense":50},    
];

$(document).ready(function() {
$("#chart").kendoChart({
    theme: "silver",
    title: {
        text: "Total records processed"
    },
    legend: {
        position: "bottom"
    },
    dataSource: {
        data: data,
        group: {
            field: "Name"
        }
    },
    transitions: false,
    series: [{
        type: "column",
        stack: "true",
        field: "Expense"
    }],
    categoryAxis: {
        field: "Year"                                
    },
            tooltip: {
      visible: true,
      template: "#= value #"
    }
});
});

http://jsfiddle.net/johnok/F2TQ8/92/

Answer 1

您可以向dataSource添加sort property：

    dataSource: {
        data: data,
        group: {
            field: "Name"
        },
        sort: { field: "Year", dir: "asc" }
    },

更新了 FIDDLE

Kendo UI堆积了带有远程数据的条形图

1 个答案: