javascript - 条形图 将数据堆叠在彼此之上

Question

我正在使用 this chart implementation . 但是，它分散了我的数据，而不是相互堆叠。

我想在 1970 年堆叠我的第一个数组，在 1975 年堆叠第二个数组。换句话说，我希望有两个堆叠条而不是五个。我想保持我的数据数组原样，而不是将它们分成几部分。

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

当前输出:

Desired Output: 类似于如下

Answer 1

尝试这样安排您的数据:

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

已更新 DEMO

已更新 FIDDLE