하이 차트 그룹화 된 여러 그룹의 기둥 형 차트?

주어진 날의 여러 그룹을 제외하고 Highcharts에 그룹화 된 기둥 형 차트를 만들려고합니다. 그래프는 http://www.highcharts.com/demo/column-stacked-and-grouped (이 포럼 질문 http://highslide.com/forum/viewtopic.php?f=9&t=19575)과 같을 것입니다. 단, 각 스택 막대는 그룹화 된 컬럼 세트 (스택되지 않은)로 대체됩니다. 따라서 하루에 여러 그룹의 열을 볼 수 있습니다. 각 그룹은 하나의 사용자에 해당합니다. 누구든지이 작업을 수행하는 방법을 알고 있습니까?하이 차트 그룹화 된 여러 그룹의 기둥 형 차트?

편집 : 여기 여기 http://highcharts.uservoice.com/forums/55896-general/suggestions/2230615-grouped-x-axis#comments 스레드에서

<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://jsfiddle.net/pMA2H/1/을 찾아낸 jsfiddle입니다. x 축 증가분 코드는 조금씩 지루합니다. 각 증가분을 수동으로 추가하고 간격을 포함시켜 데이터 포인트가 정렬되도록해야하기 때문입니다. 이전에 그래프 대신에 pointStart와 pointInterval을 지정할 수 있습니다. 누군가가 더 우아한 해결책을 안다면, 좋을 것입니다. 다른 사람이 설명되지 않는 무언가가없는

출처

2013-04-30 Flash

나는이 모양을하는 방법을 모르겠어요. 스태킹을 제거 할 수 있습니까? 아마 이것에 간단한 모형을 보여줄 수 있을까요? –

죄송합니다. http://jsfiddle.net/pMA2H/1/에서 찾은 예제의 jsfiddle이 있습니다. 이것이 제가 찾고 있던 것입니다. 이 그룹화 된 기둥 형 차트를 다루는 사람이 있었는지 궁금해했습니다. – Flash

하이 차트를 사용하는 경우이 플러그인을 사용해보십시오 http://blacklabel.github.io/grouped_categories/ –

당신은 그룹화 범주에 대한 플러그인을 사용할 수 있습니다, 여기에 당신은 그것을 찾을 수 있습니다 https://github.com/blacklabel/grouped_categories

출처

2013-05-02 09:10:06

감사합니다 @pawel, 이것에 대해 살펴 보겠습니다. – Flash

이것은 내가 필요로하는 것에 좋게 보인다, 다시 한번 감사한다 @Pawel – Flash

, 당신을 위해 무엇을 요구하는 것은 그룹화 된 열 차트의 기본 동작입니다 :

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

와 나는 같은 문제가 있고, 그것은 일반 HighCharts을 usign 해결했다. 마법 같은 데이터 셔플이 필요하지만 결과는 공평합니다.

enter image description here

여기를 참조하십시오 : https://stackoverflow.com/a/31029535/461499

출처

2015-06-24 14:40:15 RobAu

하이 차트 그룹화 된 여러 그룹의 기둥 형 차트?

답변

관련 문제