如何在Javascript / Higcharts中从HomeController调用方法?

时间:2019-07-17 06:39:41

标签: javascript c# asp.net-mvc highcharts

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

    });

在系列的向下钻取中,单击条形时,我想调用此方法。

0 个答案:

没有答案