Развертка серии линейных диаграмм до другой серии линейных диаграмм

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]
        }],
        
    });
});


javascript series highcharts linechart drilldown
person Ruben Kalath    schedule 06.09.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Детализация связана с 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/

person Barbara Laird    schedule 06.09.2016
comment
привет ... как это сделать динамически ... я имею в виду каждый раз, когда я передаю список (сгенерированный данными в БД или т. д.), поэтому это решение работает, если просто вставить числа внутри самого кода, не передавая список или любую переменную. . - person Rouzbeh Zarandi; 07.02.2018
comment
@RouzbehZarandi Вы можете заменить жестко закодированные массивы переменными. Возможно, вы захотите создать новый вопрос с вашим кодом и конкретными проблемами, с которыми вы с ним столкнулись. - person Barbara Laird; 09.02.2018