NET MVC项目,我在其中使用Highcharts。首先,我在xAxis上显示了完整的小时数。现在,当我单击这些栏之一时,我想显示该小时的分钟数(数据来自数据库,因此不是硬编码的)。
这是我要调用的方法的代码:
public List<ChartDataMinuteDTO> GetDataForMinuteDrilldown(int hour)
{
var minuteItems = db.ChartDatas
.Where(x=> x.Timestamp.Hour == hour)
//.GroupBy(x => new { x.Timestamp.Date, x.Timestamp.Hour })
.Select(x => new ChartDataMinuteDTO
{
id = x.Timestamp.Hour,
minute = x.Timestamp.Minute
})
.ToList();
return minuteItems;
}
这是js中图表的代码:
$.getJSON(`/Home/GetDataForChart?function=${func}`)
.then(result => {
console.log(result);
var durationPerHourArray = result.map(function (item) {
return {
name: item['hour'] + " Uhr",
y: item['avg'],
drilldown: item['hour'] + " Uhr"
};
});
Highcharts.chart('container', {
chart: {
zoomType: 'xy',
spacingBottom: 40,
spacingTop: 40
},
title: {
text: 'Performance and Error Analytics'
},
subtitle: {
text: 'Analytics of: ' + func
},
xAxis: [{
type: 'category',
crosshair: true
}],
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:
}
});
});
在系列的向下钻取中,单击条形时,我想调用此方法。