일련 번호의 하이 차트 드릴 다운

Question

연도별로 계열 데이터를 표시하는 차트가 있습니다. 예 : 1011, 1112, 1213, 1415 및 각 연도의 실제 및 목표를 보여줍니다. 사용자가 열을 클릭하면

, 아래로 그 데이터 세트로 차트 드릴, 그러나 나는 ... 오히려 하나의 열보다, 서로 옆에 실제 및 대상을 보여줄 수 있도록하고 싶습니다

JSFiddle : http://jsfiddle.net/MuydK/

어떤 도움을 주셔서 감사 드리며, 여러 가지 방법을 시도해 보았습니다. 데이터 세트보다는 데이터 세트를 설정하는 방법을 이해하지만 SetChart 등에 어떤 변경이 필요한지 알지 못한다고 생각합니다 ...

또한 시리즈 타이틀이 사라집니다. 한 번 뚫고 나오고, 어떤 아이디어라도 ...?

많은 도움을 주셔서 감사합니다.

나는 간단한 데이터와 코드를 업데이트

 var chart; 
    $(document).ready(function() { 
     var colors = Highcharts.getOptions().colors, 
     categories1 = ['1011', '1112', '1213', '1415'], 
     name1 = 'Actual', 

     data1 = [ ... 

Answer 1

, 나는이 그냥 당신에 따라 코드를 업데이트 할 수있는 데모입니다, 이것은 당신이 원하는 생각합니다.

$(function() { 
     var chart; 
     $(document).ready(function() { 
      var colors = Highcharts.getOptions().colors, 
      categories1 = ['1011', '1112', '1213', '1415'], 
      name1 = 'Actual', 

      data1 = [ 
{ 
    y: 1674, 
    color: colors[0], 
    drilldown: { 
     name: '1011 Actual', 
     categories: ['BS', 'B', 'IT', 'C'], 
     data: [3, 32, 54, 50], 

     color: colors[0], 

     name1: '1011 Target', 
     data1: [0, 31, 50, 60], 
     color1:colors[1] 
    } 
} 
];   var colors = Highcharts.getOptions().colors, 
      categories2 = ['1011', '1112', '1213', '1415'], 
      name2 = 'Target', 

      data2 = [ 
{ 
    y: 1633, 
    color: colors[1], 
    drilldown: { 
      name: '1011 Actual', 
     categories: ['BS', 'B', 'IT', 'C'], 
     data: [3, 32, 54, 50], 

     color: colors[0], 

     name1: '1011 Target', 
     data1: [0, 31, 50, 60], 
     color1:colors[1] 
    } 
} 
];   function setChart(name, categories, data, color) { 
       console.log(name, categories, data, color); 
       chart.xAxis[0].setCategories(categories); 
       while (chart.series.length > 0) { 
        chart.series[0].remove(true); 
       } 
       for (var i = 0; i < data.length; i++) { 
        chart.addSeries({ 
         name: name[i], 
         data: data[i], 
         color: color[i] 
        }); 

       } 
      } 
      chart = new Highcharts.Chart({ 
       chart: { 
        renderTo: 'con1', 
        type: 'column' 
       }, 
       title: { 
        text: 'Learner Responsive 16-18' 
       }, 
       subtitle: { 
        text: 'Click the columns to view breakdown by department. Click again to view by Academic Year.' 
       }, 
       xAxis: { 
        categories: categories1 
        , labels: {rotation:-90, align:'right'} 
       }, 
       yAxis: { 
        title: { 
         text: 'Learner Responsive 16-18' 
        } 
       }, 

       plotOptions: { 
        column: { 
         cursor: 'pointer', 
         point: { 
          events: { 
           click: function() { 
            var drilldown = this.drilldown; 
            if (drilldown) { // drill down 
             setChart([drilldown.name,drilldown.name1], drilldown.categories, [drilldown.data, drilldown.data1], [drilldown.color,drilldown.color1]); 
            } else { // restore 
             setChart(name, categories1, [data1, data2], 'white'); 
            } 
           } 
          } 
         }, 

         dataLabels: { 
          enabled: true, 
          color: colors[0], 
          style: { 
           fontWeight: 'bold' 
          }, 
          formatter: function() { 
           return this.y; // +'%'; 
          } 
         } 
        } 
       }, 

       tooltip: { 
        formatter: function() { 
         var point = this.point, 
         series = point.series, 
         s = 'Learner Responsive 16-18' + '<br/>' + this.x + ' ' + series.name + ' is <b>' + this.y + '</b><br/>'; 
         if (point.drilldown) { 
          s += 'Click to view <b>' + point.category + ' ' + series.name + ' </b>' + ' by department'; 
         } else { 
          s += 'Click to return to view by academic year.'; 
         } 
         return s; 
        } 
       }, 

       series: [{ 
        name: name1, 
        data: data1, 
        color: colors[0] 
       },{ 
        name: name2, 
        data: data2, 
        color: colors[1] 
       }], 

       exporting: { 
        enabled: false 
       } 
      }, 
       function (chart) { 
       console.log(chart); 
      }); 
     }); 
    });