Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
790 views
in Technique[技术] by (71.8m points)

asp.net mvc - Kendo Stacked Bar Chart configuration

I have an MVC app and my controller is passing the following json data to my view

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
}

I need to know how to configure my Kendo stacked bar chart to display the data like this http://jsfiddle.net/ihatemash/B6LSX/

I can't figure out how to configure the series and category to show the stacked bar chart correctly.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

here is working example http://jsfiddle.net/idhasitha/F2TQ8/

try with like this

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...