3

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

编辑：这是我找到的一个 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 作为日期。如果有人知道更优雅的解决方案，那就太好了。

4

4 回答 4

2

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

于 2013-05-02T09:10:06.257 回答
2

除非您没有解释其他内容，否则您要求的是分组柱形图的默认行为：

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

.

实现这一目标所需的只是多个数据系列和一种“列”

于 2013-05-01T12:49:41.800 回答
1

我遇到了同样的问题，并使用普通的 HighCharts 解决了它。它需要一些神奇的数据洗牌，但结果是公平的。

在此处输入图像描述

见这里：https ://stackoverflow.com/a/31029535/461499

于 2015-06-24T14:40:15.957 回答
0

为了解决这个问题，你需要在一个不能堆叠的变量上堆叠。喜欢：系列：{

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

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

1,2,3,4 等没有堆叠

于 2014-05-16T05:37:24.043 回答