javascript - 折线图系列向下钻取到另一个折线图系列

Question

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

我一直在努力让这个 highcharts 示例发挥作用，如果我点击每一行，您就可以深入了解它自己的新折线图系列。

所以每一行都是一种能力，我希望能够深入了解具有相对相同类型数据的每种能力的行为。

我尝试将 Foundation 行为作为下钻之一，但没有奏效。

谢谢你的帮助!

// 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: {
        		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/