Как реализовать развертку в проекте asp.net mvc?

Я создал проект ASP.NET MVC для отображения средней продолжительности различных действий. Для этого я использовал Highcharts. Вначале я показываю среднюю продолжительность в час на графике. Когда я нажимаю на эту диаграмму, я хочу показать среднюю продолжительность каждой минуты, затем каждую секунду, миллисекунду... Я попытался реализовать детализацию, но когда я нажимаю на панель, ничего не происходит.

Вот код Highchart и данные:

Highcharts.chart('container', {
                    chart: {
                        zoomType: 'xy',
                        spacingBottom: 40,
                        spacingTop: 40
                    },
                    title: {
                        text: 'Performance and Error Analytics'
                    },
                    subtitle: {
                        text: 'Analytics of: ' + func
                    },
                    xAxis: [{
                        categories: timeArray,
                        crosshair: true,
                        title: {
                            text: 'Hours',
                            align: 'middle'
                        }
                    }],
                    yAxis: [{ // Primary yAxis
                        labels: {
                            format: '{value}',
                            style: {
                                color: Highcharts.getOptions().colors[1]
                            }
                        },
                        title: {
                            text: 'Errors',
                            style: {
                                color: Highcharts.getOptions().colors[2]
                            }
                        }
                    }, { // Secondary yAxis
                        title: {
                            text: 'Duration in ms',
                            style: {
                                color: Highcharts.getOptions().colors[0]
                            }
                        },
                        labels: {
                            format: '{value} ms',
                            style: {
                                color: Highcharts.getOptions().colors[0]
                            }
                        },
                        opposite: true
                    }],
                    tooltip: {
                        shared: true
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'center',
                        x: 0,
                        verticalAlign: 'bottom',
                        y: 50,
                        floating: true,
                        backgroundColor:
                            Highcharts.defaultOptions.legend.backgroundColor || // theme
                            'rgba(255,255,255,0.25)'
                    },
                    series: [{
                        name: 'Duration in ms',
                        type: 'column',
                        yAxis: 1,
                        data: durationPerHourArray,
                        tooltip: {
                            valueSuffix: ' ms'
                        }
                    }, {
                        name: 'Errors',
                        type: 'spline',
                        data: errorArray,
                        tooltip: {
                            valueSuffix: ' '
                        }
                        }],
                    drilldown: {
                        series: [{
                            type: 'column',
                            id: hourArray,
                            name: 'Duration every minute',
                            data: durationPerMinuteArray
                        }]
                    }
                });

массив времени:

(3) […]
0: "9 Uhr"
​1: "10 Uhr"
​2: "11 Uhr"

продолжительностьPerHourArray:

(3) […]
​0: Object { y: 2.5, drilldown: 9 }
​1: Object { y: 3, drilldown: 10 }
​2: Object { y: 141.5, drilldown: 11 }

часмассив:

(3) […]
​0: 9
​1: 10
​2: 11

продолжительностьPerMinuteArray:

(3) […]
​0: {…}
​​id: Array [ 16 ]
​​y: Array [ 2.5 ]
​​<prototype>: Object { … }
1: {…}
​​id: Array(4) [ 13, 16, 20, … ]
​​y: Array(4) [ 3, 2, 5, … ]
​​<prototype>: Object { … }
2: {…}
​​id: Array [ 50, 53 ]
​​y: Array [ 143, 140 ]
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
414
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Возможно, параметры детализации настроены неправильно. id серии детализации должно быть таким же, как drilldown в базовой серии:

series: [{
    ...,
    data: [{
        ...,
        drilldown: '1'
    }, {
        ...,
        drilldown: '2'
    }, ...]
}],
drilldown: {
    series: [{
        id: '1',
        data: [...]
    }, {
        id: '2',
        data: [...]
    }, ...]
}

Живая демонстрация:http://jsfiddle.net/BlackLabel/Lfjs57xt/

Документы:https://www.highcharts.com/docs/chart-concepts/drilldown

Другие вопросы по теме