Kendo Stacked Bar Chart配置

时间:2014-07-28 04:53:51

标签: asp.net-mvc kendo-ui kendo-dataviz

我有一个MVC应用程序,我的控制器将以下json数据传递给我的视图

data:
{
    "Category":"Q1 2013",
    "Name":"Female",
    "Count":5000
},
{
    "Category":"Q1 2013",
    "Name":"Male",
    "Count":5000
}
{
    "Category":"Q1 2012",
    "Name":"Female",
    "Count":3500
},
{
    "Category":"Q1 2012",
    "Name":"Male",
    "Count":5000
}

我需要知道如何配置我的Kendo堆叠条形图以显示这样的数据http://jsfiddle.net/ihatemash/B6LSX/

我无法弄清楚如何配置系列和类别以正确显示堆积条形图。

1 个答案:

答案 0 :(得分:3)

这是工作示例 http://jsfiddle.net/idhasitha/F2TQ8/

尝试像这样

var data = [

    {"Name":1,"Year":2011,"Expense":200.00},
    {"Name":1,"Year":2012,"Expense":274.91},
    {"Name":5,"Year":2011,"Expense":100.00},
    {"Name":5,"Year":2012,"Expense":315.84},

];

$(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"                                
        }
    });
});