하이 차트 다중 레벨 카테고리

Question

하이 차트로 작업 중이며 나열된 카테고리와 하위 카테고리를 가져와야합니다.

예컨대 :

내가 어떤 선수가 있고, 내가 장소에 의해 성별로 메달을 나열하고 싶습니다.

그래서이 모든 메달 유형을 나열하고 남성과 여성

로 구분 된 범주

| GOLD | SILVER | BRONZE | 
    |male|female||male|female||male|female| 
    --------------------------------------- 
    | cl | cl | cl | cl | cl | cl | 

* CL은 = 성

당 메달의 해당 유형의 데이터에 몇 가지 열이 highcharts에서이 가능하다해야 그렇다면 어떻게?

Answer 1

스택 막대 차트가 필요하다고 생각합니다. 데이터를 기반으로 샘플을 따르십시오. http://jsfiddle.net/AtGRH/

$(function() { 
     $('#container').highcharts({ 
      chart: { 
       type: 'bar' 
      }, 
      title: { 
       text: 'Stacked bar chart' 
      }, 
      xAxis: { 
       categories: ['Gold', 'Silver', 'Bronze'] 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Total fruit consumption' 
       } 
      }, 
      legend: { 
       backgroundColor: '#FFFFFF', 
       reversed: true 
      }, 
      plotOptions: { 
       series: { 
        stacking: 'normal' 
       } 
      }, 
       series: [{ 
       name: 'Male', 
       data: [5, 3, 4 ] 
      }, { 
       name: 'Female', 
       data: [2, 2, 3] 
      },] 
     }); 
    }); 

Answer 2

이 오래된 요청하지만 내가 가진 이후로 그냥 내가 해결책을 공유하는 것이 뭔가 비슷한 생각을 할 - HighCharts의 여러 카테고리 플러그인에 내장 - http://jsfiddle.net/fieldsure/Lr5sjh5x/2/

- 여기 jsfiddle의 코드는

$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: "container", 
      type: "column", 
      borderWidth: 5, 
      borderColor: '#e8eaeb', 
      borderRadius: 0, 
      backgroundColor: '#f7f7f7' 
     }, 
     title: { 
      style: { 
       'fontSize': '1em' 
      }, 
      useHTML: true, 
      x: -27, 
      y: 8, 
      text: '<span class="chart-title"> Grouped Categories with 2 Series<span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>' 
     }, 
     yAxis: [{ // Primary yAxis 
      labels: { 
       format: '${value}', 
       style: { 
        color: Highcharts.getOptions().colors[0] 
       } 
      }, 
      title: { 
       text: 'Daily Tickets', 
       style: { 
        color: Highcharts.getOptions().colors[0] 
       } 
      } 
     }, { // Secondary yAxis 
      title: { 
       text: 'Invoices', 
       style: { 
        color: Highcharts.getOptions().colors[0] 
       } 
      }, 
      labels: { 
       format: '${value}', 
       style: { 
        color: Highcharts.getOptions().colors[0] 
       } 
      }, 
      opposite: true 
     }] 
     , 
     series: [{ 
      name: 'Daily', 
      type: 'column', 
      yAxis: 1, 
      data: [4, 14, 18, 5, 6, 5, 14, 15, 18], 
      tooltip: { 
       valueSuffix: ' mm' 
      } 

     }, { 
      name: 'Invoices', 
      type: 'column', 
      data: [4, 17, 18, 8, 9, 5, 13, 15, 18], 
      tooltip: { 
       valueSuffix: ' °C' 
      } 
     }], 
     xAxis: { 
      categories: [{ 
       name: "1/1/2014", 
       categories: ["Vendor 1", "Vendor 2", "Vendor 3"] 
      }, { 
       name: "1/2/2014", 
       categories: ["Vendor 1", "Vendor 2", "Vendor 3"] 
      }, { 
       name: "1/3/2014", 
       categories: ["Vendor 1", "Vendor 2", "Vendor 3"] 
      }] 
     } 
    }); 
});