如何在asp.net mvc项目中实现drilldown？

Question

我创建了一个 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"

durationPerHourArray:

(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

durationPerMinuteArray:

(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 ]

Answer 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

如何在asp.net mvc项目中实现drilldown？

How to implement drilldown in asp.net mvc project?

javascript

c#

asp.net-mvc

highcharts

drilldown