问题
I am using this chart implementation. However, it disperse my data rather than stack on the top of each other.
I want to stack my first array on 1970, the second one on 1975. In other words, I would like to have two stacked bar rather than have five. I would like to keep my data array as it is, rather than seperating them into pieces.
function createChart() {
$("#chart").kendoChart({
title: {
text: "World population by age group and sex"
},
legend: {
visible: false
},
seriesDefaults: {
type: "column"
},
series: [{
name: "1970",
stack: true,
data: [85, 92, 98, 104, 54]
}, {
name: "1975",
stack: true,
data: [49, 50, 55, 56, 95]
}],
seriesColors: ["green", "yellow", "#dc5c71", "#e47f8f", "#eba1ad",
"#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"
],
valueAxis: {
labels: {
template: "#= kendo.format('{0:N0}', value )#"
},
line: {
visible: false
}
},
categoryAxis: {
categories: [1970, 1975],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.stack #s, age #= series.name #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
Fiddle
Current Output:
Desired Output: is similar to as follows
回答1:
Try arranging your data like this:
$("#chart").kendoChart({
title: {
text: "World population by age group and sex"
},
theme: "Metro",
legend: {
visible: false
},
seriesDefaults: {
type: "column"
},
series: [
{
name: "item1",
stack: true,
data: [85, 49]
},{
name: "item2",
stack: true,
data: [ 92, 50]
},{
name: "item3",
stack: true,
data: [98, 55]
},{
name: "item4",
stack: true,
data: [104, 56]
},,{
name: "item5",
stack: true,
data: [54,95]
},
],
valueAxis: {
labels: {
template: "#= kendo.format('{0:N0}', value )#"
},
line: {
visible: false
}
},
categoryAxis: {
categories: [1970, 1975],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name # #= value #"
}
});
Updated DEMO
Updated FIDDLE
来源:https://stackoverflow.com/questions/30518283/bar-graph-stack-data-on-the-top-of-each-other