highcharts - не создает с ajax

Question

Я хочу, чтобы график создавался после такого события, как нажатие кнопки, но график не создавался после нажатия кнопки.

в примере 2 деления.container1 и container2, container1 визуализируют PartalView в бритве и работают нормально и диаграмма создана, но container2 предположим, что после нажатия кнопки Change Data содержит диаграмму, она вызывает действие через AJAX, которое отображает тот же PartalView, как показанов container1 но не работает!

где я не прав?

вызвано действие и сервер отвечает, и в консоли нет ошибки, это после нажатия кнопки:

Index.cshtml (View)

<button id="changeDataButton">Change Data</button>

<div id="container1">
    @{
        Random random = new Random();
        Html.RenderPartial("~/Views/Shared/chartPartialView.cshtml", new ChartModel()
        {
            CategoriesStackBar = new List<string>() { "A", "B", "C" },
            Series = new List<Series>()
                {
                    new ColumnSeries()
                    {
                        Name = "A",
                        Data = new List<ColumnSeriesData>()
                        {
                            new ColumnSeriesData()
                            {
                                Y = random.Next(100),
                            },
                            new ColumnSeriesData()
                            {
                                Y = random.Next(100),
                            },
                            new ColumnSeriesData()
                            {
                                Y = random.Next(100),
                            },
                        },
                    }
                },
            Id = "chart",
        });
    }
</div>

<div id="container2">

</div>

@section scripts{
    <script src="~/Scripts/highcharts.js"></script>

    <script>
        $(document).ready(function () {
            $('#changeDataButton').click(function (event) {
                console.log('change data button clicked');
                $.ajax({
                    async: false,
                    url: '/Home/UpdateChart',
                    success: function (partialView) {
                        console.log("success");
                        console.log(partialView);
                        $('#container2').innerHTML = (partialView);
                    }
                })
            })
        });
    </script>
}

(Controller)

    public ActionResult UpdateChart()
    {
        Random random = new Random();
        PartialViewResult partialViewResult = PartialView("~/Views/Shared/chartPartialView.cshtml", new ChartModel()
        {
            CategoriesStackBar = new List<string>() { "A", "B", "C" },
            Series = new List<Series>()
                {
                    new ColumnSeries()
                    {
                        Name = "A",
                        Data = new List<ColumnSeriesData>()
                        {
                            new ColumnSeriesData()
                            {
                                Y = random.Next(100),
                            },
                            new ColumnSeriesData()
                            {
                                Y = random.Next(100),
                            },
                            new ColumnSeriesData()
                            {
                                Y = random.Next(100),
                            },
                        },
                        Id = "dynamicChart",
                    }
                }
        });
        return partialViewResult;
    }

Заранее благодарим за вашу помощь

Answer 1

Вы не можете использовать innerHTML непосредственно для объекта jQuery, вам придется использовать .html():

$('#container2').html(partialView);