线图表系列钻取到另一个线型图系列

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

向下钻取与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/