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

timeArray：

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

hourArray：

(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项目中实现向下钻取？

1 个答案: