Highcharts分组柱状图与多个组？

我正在寻找在Highcharts中创建分组柱状图，除了在给定的一天中有多个组。该图看起来像这样http://www.highcharts.com/demo/column-stacked-and-grouped（来自这个论坛问题http://highslide.com/forum/viewtopic.php?f=9&t=19575），除了每个堆叠条被替换为一组分组（非堆叠）。因此，我们会每天看到多组专栏，这个想法是每个组对应一个用户。有谁知道如何做到这一点？Highcharts分组柱状图与多个组？

编辑：这里有一个的jsfiddle我发现http://jsfiddle.net/pMA2H/1/

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>ElementStacks - jsFiddle demo</title> 

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script> 

    <link rel="stylesheet" type="text/css" href="/css/normalize.css"/> 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"/> 



     <script type='text/javascript' src="http://highcharts.com/js/testing.js"></script> 


    <style type='text/css'> 

    </style> 



<script type='text/javascript'>//<![CDATA[ 
$(function(){ 
/* 
Data is: 
          Gross Amount Cost Amount 
Services  Australia 20    10    
       Germany  30    15 
Manufacturing Australia 35    17 
       Germany  25    12 

---- 

Would like to be able define my categories hierarchically - example: 
xAxis: [{ 
    categories: [{ 
    name: 'Services' 
    children: ['Australia', 'Germany'] 
    },{ 
    name: 'Manufacturing' 
    children: ['Australia', 'Germany'] 
    }] 
}] 

and get a result similar to what is fudged up by using the renderer on the right. 
*/ 

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'column' 
    }, 
    xAxis: [{ 
     categories: ['Australia', 'Germany', 'Australia', 'Germany'], 
     labels: { 
      y: 40 
     } 
    }], 
    legend: { 
     margin: 40 
    }, 

    series: [{ 
     name: 'Gross', 
     data: [['Services', 20],['Services',30],['Manufacturing', 35],['Manufacturing', 25]] 
    },{ 
     name: 'Cost', 
     data: [['Services', 10],['Services',15],['Manufacturing', 17],['Manufacturing', 13]] 
    }] 
}, function(chart){ 
    $('.highcharts-axis:first > text').each(function() { 
     this.setAttribute('y', parseInt(this.getAttribute('y')) - 20) 
    }); 

    var text1 = chart.renderer.text("Services", 150, 340).add(); 
    var text2 = chart.renderer.text("Manufacturing", 350, 340).add(); 
}); 
});//]]> 

</script> 


</head> 
<body> 
    <div id="container" style="height: 400px; width: 500px"></div> 


</body> 


</html>

从这里http://highcharts.uservoice.com/forums/55896-general/suggestions/2230615-grouped-x-axis#comments线程。尽管x轴增量的代码有点繁琐，因为您必须手动添加每个增量并包含其间距，以确保数据点排列整齐。我之前已经完成了图形，您可以在日期中指定pointStart和pointInterval。如果有人知道更优雅的解决方案，那会很棒。

来源

2013-04-30 Flash

我不知道这应该如何样子。你能否删除堆叠？也许你可以为此展示简单的模型？ – 2013-05-01 12:16:38

对不起，这里是我找到一个例子jsfiddle http://jsfiddle.net/pMA2H/1/。这就是我正在寻找的东西;只是想知道是否有人曾经处理过这种分组柱形图并有解决方案。 – Flash 2013-05-01 17:36:19

如果使用Highcharts http://blacklabel.github.io/grouped_categories/ – 2017-08-09 06:53:56

您可以使用插件进行分组类别，在这里您可以找到它：https://github.com/blacklabel/grouped_categories

来源

2013-05-02 09:10:06

感谢@pawel，请给这个插件试一试，我会看看这个。 – Flash 2013-05-02 18:16:25

这看起来不错，我需要什么，再次感谢@Pawel – Flash 2013-05-02 21:28:47

除非有别的东西，你不解释，你问的是一个分组柱形图的默认行为：

http://jsfiddle.net/jlbriggs/TfvGp/

所有需要实现这一目标是多重数据系列和一列'列'

来源

2013-05-01 12:49:41 jlbriggs

为了解决这个问题，你需要堆栈一个不能堆栈的变量。像：系列：{

{ 
    name: 'boys', 
    stack: 1, 
    data: [2, 6, 5,0] 
} 

{ 
    name: 'girls', 
    stack: 2, 
    data: [0, 6, 1,3] 
}

} 无堆叠与1,2,3,4 e.t.c

来源

2014-05-16 05:37:24 crystoline

我有同样的问题，并解决它usign平原HighCharts。它需要一些神奇的数据，但结果是公平的。

enter image description here

在这里看到：https://stackoverflow.com/a/31029535/461499

来源

2015-06-24 14:40:15 RobAu

Highcharts分组柱状图与多个组？

回答

相关问题