Highcharts Agrupados Gráfico de colunas com vários grupos?

votos
3

Eu estou olhando para criar um gráfico de colunas agrupadas em Highcharts, exceto com vários grupos em um determinado dia. O gráfico ficaria assim http://www.highcharts.com/demo/column-stacked-and-grouped (a partir desta questão fórum http://highslide.com/forum/viewtopic.php?f=9&t=19575 ) , excepto com cada uma das barras empilhados substituído com um conjunto agrupado de colunas (não empilhado). Nós seria, por conseguinte, ver vários grupos de colunas por dia, sendo a ideia que cada grupo corresponde a um utilizador. Alguém sabe como fazer isso?

Edit: Aqui está um jsFiddle eu encontrei 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>

do tópico aqui http://highcharts.uservoice.com/forums/55896-general/suggestions/2230615-grouped-x-axis#comments . O código para os incrementos do eixo x é um pouco entediante, porém, porque você tem que adicionar manualmente cada incremento e incluir seu espaçamento para se certificar de seus pontos de dados line up. Eu fiz gráficos anteriormente, onde você pode ao invés especificar um pointStart e pointInterval para datas. Se alguém souber de uma solução mais elegante, isso seria ótimo.

Publicado 30/04/2013 em 21:48
fonte usuário
Em outras línguas...                            


4 respostas

votos
2

Você pode usar o plug-in para categorias agrupadas, aqui você pode encontrá-lo: https://github.com/blacklabel/grouped_categories

Respondeu 02/05/2013 em 10:10
fonte usuário

votos
1

Eu tive o mesmo problema e resolveu usign Highcharts simples. É preciso algum datashuffling mágico, mas o resultado é justo.

digite descrição da imagem aqui

Veja aqui: https://stackoverflow.com/a/31029535/461499

Respondeu 24/06/2015 em 14:40
fonte usuário

votos
1

Para resolver este problema, u precisa empilhar em uma variável que não pode empilhar. Como: Série: {

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

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

} No empilhamento com 1,2,3,4 etc

Respondeu 16/05/2014 em 06:37
fonte usuário

votos
1

A menos que haja outra coisa que você não está explicando, o que você está pedindo é o comportamento padrão de um gráfico de colunas agrupadas:

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

.

tudo o que é necessário para conseguir isto é várias séries de dados e um tipo de 'coluna'

Respondeu 01/05/2013 em 13:49
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more