堆叠柱形图的异步钻取，在钻取高图javascript上运行事件

Question

我遇到的问题是使用highcharts图表加载时间很慢。 这是因为我的循环在页面加载时为18个不同的图形获得24点。 使用此数据的图表将从上一个图表向下钻取，如下所示。

//Drill down for monthly periods

        @foreach (var item in Model)
        {
            <text>
        @item.QuestionType = {
            chart: {
                type: 'column',
                animation: false
            },
            title: {
                text: '@item.QuestionType over the last year'
            },
            xAxis: {
                type: 'category',
                title: {
                    text: 'Month'
                }
            },
            yAxis: {
                allowDecimals: false,
                title: {
                    text: 'Questions answered'
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal'
                }
            },
            series: [
            {
                name: 'Yes',
                data: [{
                    name: 'January',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "Yes", month = 1 }),
                },
                {
                    name: 'February',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "Yes", month = 2 }),
                },
                {
                    name: 'March',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "Yes", month = 3 }),
                },
                {
                    name: 'April',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "Yes", month = 4 }),
                },
                {
                    name: 'May',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "Yes", month = 5 }),
                },
                {
                    name: 'June',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "Yes", month = 6 }),
                },
                {
                    name: 'July',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "Yes", month = 7 }),
                },
                {
                    name: 'August',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "Yes", month = 8 }),
                },
                {
                    name: 'September',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "Yes", month = 9 }),
                },
                {
                    name: 'October',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "Yes", month = 10 }),
                },
                {
                    name: 'November',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "Yes", month = 11 }),
                },
                {
                    name: 'Decemebr',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "Yes", month = 12 }),
                },],

            }, {
                name: 'No',
                data: [{
                    name: 'January',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "No", month = 1 }),
                },
                {
                    name: 'February',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "No", month = 2 }),
                },
                {
                    name: 'March',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "No", month = 3 }),
                },
                {
                    name: 'April',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "No", month = 4 }),
                },
                {
                    name: 'May',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "No", month = 5 }),
                },
                {
                    name: 'June',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "No", month = 6 }),
                },
                {
                    name: 'July',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "No", month = 7 }),
                },
                {
                    name: 'August',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "No", month = 8 }),
                },
                {
                    name: 'September',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "No", month = 9 }),
                },
                {
                    name: 'October',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "No", month = 10 }),
                },
                {
                    name: 'November',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "No", month = 11 }),
                },
                {
                    name: 'December',
                    y: @Html.Action("GetMonth", new { id = @item.QuestionID, category = "No", month = 12 }),
                },

                ]
            }]
        };
        </text>
        }



        //Drill down for yearly periods
        @foreach(var item in Model)
        {
            <text>
        @item.QuestionType = {
        chart: {
                type: 'pie',
                animation: false
        },
        title: {
            text: '@item.Category.CategoryName'
        },
        subtitle: {
            text: '@item.QuestionType Over the last year'
        },
        series: [{
            name: '@item.QuestionType over the last year',
            data: [{
                name: 'Yes',
                y:@Html.Action("GetYear", new { id = @item.QuestionID, category = "Yes" }),
                drilldown: @item.QuestionType,
            }, {
                name: 'No',
                y: @Html.Action("GetYear", new { id = @item.QuestionID, category = "No" }),
                drilldown: @item.QuestionType,
            }]
        }]

    };
    </text>
        }

所以我想在我的年度图表中单击一个向下钻取 并在深入到我的月度图表时加载该特定问题， 而不只是在页面加载上加载所有内容。