Линейный график серии развернутом на другой Linechart серии

Question

http://jsfiddle.net/4kp2bdus/3/

я пытался получить это Highcharts пример работы, где, если я нажимаю на каждой из линий, вы можете углубиться в его собственной новой линии диаграммы серии ,

Таким образом, каждая из линий является компетенцией, и я хочу иметь возможность развернуть поведение каждой компетенции, имеющую относительно один и тот же тип данных.

Я пробовал иметь поведение Фонда как одно из подробных разделов, но это не сработало.

Спасибо вам за помощь!

// Internationalization 
 

 

 
$(function() { 
 
    $('#container').highcharts({ 
 
     title: { 
 
      text: 'Competency Trend', 
 
      x: -20 //center 
 
     }, 
 
     subtitle: { 
 
      text: '', 
 
      x: -20 
 
     }, 
 
     xAxis: { 
 
      categories: ['Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'] 
 
     }, 
 
     yAxis: { 
 
      title: { 
 
       text: 'Max Score: 4' 
 
      }, 
 
      plotLines: [{ 
 
       value: 0, 
 
       width: 1, 
 
       color: '#808080' 
 
      }] 
 
     }, 
 
     tooltip: { 
 
      valueSuffix: '' 
 
     }, 
 
     legend: { 
 
      layout: 'vertical', 
 
      align: 'right', 
 
      verticalAlign: 'middle', 
 
      borderWidth: 0 
 
     }, 
 
     drilldown: { 
 
     \t \t series: [] 
 
     }, 
 
     series: [{ 
 
      name: 'Foundation', 
 
      data: [2.0, 2.3, 2.5, 2.9, 3.0, 2.6, 2.8, 2.65, 2.7, 2.67, 2.9, 3.0], 
 
      drilldown: 'foundationBehaviors' 
 
     }, { 
 
      name: 'Build Value', 
 
      data: [2.9, 2.9, 2.9, 2.875, 2.8, 3.0, 2.9, 2.8, 3.1, 3.2, 3.30, 3.29] 
 
     }, { 
 
      name: 'Discover', 
 
      data: [3.0, 3.1, 3.3, 3.1, 3.4, 3.42, 3.5, 3.55, 3.59, 3.61, 3.66, 3.71] 
 
     }, { 
 
      name: 'Advance', 
 
      data: [3.3, 3.4, 3.45, 3.6, 3.62, 3.65, 3.69, 3.71, 3.8, 3.89, 3.76, 3.8] 
 
     }, { 
 
      name: 'Engage', 
 
      data: [3.5, 3.51, 3.45, 3.7, 4.0, 3.76, 3.8, 3.95, 4.0, 4.0, 3.9, 3.86] 
 
     }, { 
 
      id: 'foundationBehaviors', 
 
      name: 'Foundation Behaviors', 
 
      categories: ['Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'], 
 
      data: [3.5, 3.51, 3.45, 3.7, 4.0, 3.76, 3.8, 3.95, 4.0, 4.0, 3.9, 3.86] 
 
     }], 
 
     
 
    }); 
 
});

Answer 1

Drilldown связан с point не с series. И ряд, который вы развернете до, определяется в элементе drilldown, а не в обычном series членах.

http://api.highcharts.com/highcharts/drilldown

$('#container').highcharts({ 
    title: { 
     text: 'Competency Trend', 
     x: -20 //center 
    }, 
    subtitle: { 
     text: '', 
     x: -20 
    }, 
    xAxis: { 
     categories: ['Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'] 
    }, 
    yAxis: { 
     title: { 
     text: 'Max Score: 4' 
     }, 
     plotLines: [{ 
     value: 0, 
     width: 1, 
     color: '#808080' 
     }] 
    }, 
    tooltip: { 
     valueSuffix: '' 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'middle', 
     borderWidth: 0 
    }, 
    drilldown: { 
     series: [{ 
     id: 'foundationBehaviors', 
     name: 'Foundation Behaviors', 
     categories: ['Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'], 
     data: [3.5, 3.51, 3.45, 3.7, 4.0, 3.76, 3.8, 3.95, 4.0, 4.0, 3.9, 3.86] 
     }] 
    }, 
    series: [{ 
     name: 'Foundation', 
     data: [{y:2.0, drilldown: 'foundationBehaviors'}, 2.3, 2.5, 2.9, 3.0, 2.6, 2.8, 2.65, 2.7, 2.67, 2.9, 3.0] 
    }, { 
     name: 'Build Value', 
     data: [2.9, 2.9, 2.9, 2.875, 2.8, 3.0, 2.9, 2.8, 3.1, 3.2, 3.30, 3.29] 
    }, { 
     name: 'Discover', 
     data: [3.0, 3.1, 3.3, 3.1, 3.4, 3.42, 3.5, 3.55, 3.59, 3.61, 3.66, 3.71] 
    }, { 
     name: 'Advance', 
     data: [3.3, 3.4, 3.45, 3.6, 3.62, 3.65, 3.69, 3.71, 3.8, 3.89, 3.76, 3.8] 
    }, { 
     name: 'Engage', 
     data: [3.5, 3.51, 3.45, 3.7, 4.0, 3.76, 3.8, 3.95, 4.0, 4.0, 3.9, 3.86] 
    }], 

    }); 

http://jsfiddle.net/4kp2bdus/4/