条形图 在彼此的顶部堆叠数据

Posted 2023-05-07

【中文标题】条形图 在彼此的顶部堆叠数据

【英文标题】：Bar graph Stack data on the top of each other

【发布时间】：2015-08-11 15:40:51

【问题描述】：

我正在使用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:类似如下

【问题讨论】：

你能把图表代码贴在这里吗？或者把它放在一个jsfiddle中。我的公司网络阻止了 Telerik Dojo。 :(

尼古拉斯的任何更新。类似于jsfiddle.net/n9xvof2y/4 下面的例子，他连接数组。

【参考方案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

【讨论】：

有没有办法保留数组本身，而不是把它们分开？其实这是我的主要观点。

@my***，看看demos.telerik.com/kendo-ui/bar-charts/grouped-data。您需要按项目而不是按年份分组才能获得一个系列，每个项目获得 2 分...

我想拥有如下jsfiddle.net/n9xvof2y/3他只有一个数据数组并处理它。顺便说一句，我赞成你的回答，但是我已经处理这个问题好几个小时了。

你能给我举个例子吗？

@my***，对于分组，您可以使用这样的一组对象：jsfiddle.net/ezanker/va5pu8tf/2。您最后链接的小提琴使用 highcharts 而不是剑道，它也没有按照您想要的方式分组......