Bar graph Stack data on the top of each other

蹲街弑〆低调 提交于 2019-12-11 02:28:52

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!