Highsoft Highcharts не видны в частичном представлении asp.net MVC - PullRequest
0 голосов
/ 28 марта 2019

Я пытаюсь отрисовать highsoft highchart в частичном представлении.Если я отображаю диаграмму на главном экране, все работает нормально.

Частичное представление будет загружено с помощью ajax-вызова внутри моего основного представления "index.cshtml":

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<button id="showIndexChart" onclick="RenderIndexPartial()">Get Partial</button>

<div id="PartialContent">

</div>



@section scripts{
    <script>

        var RenderIndexPartial = function () {
           $.ajax({
                url: '/Line/RenderIndexPartial',
                type: "Get",
                cache: false,
                dataType: "html",
                success: function (PartialViewData) {
                    $('#PartialContent').html(PartialViewData);
                },
                error: function (xhr, status, error) {
                    console.log("status: " + status + " / error: " + error);
                },
            });
        };

    </script>
}

.Действие контроллера для частичного представления выглядит следующим образом: возвращает частичное представление и модель (объект Highsoft.Web.Mvc.Charts.Highcharts)

      [HttpGet]
        public ActionResult RenderPartial()
        {
            List<double> tokyoValues = new List<double> { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 };
            List<LineSeriesData> tokyoData = new List<LineSeriesData>();

            tokyoValues.ForEach(p => tokyoData.Add(new LineSeriesData { Y = p }));


            var tmpChart = new Highcharts()
            {
                Chart = new Chart
                {
                    Height = 100,
                    Width = 100,
                    Type = ChartType.Line,
                    RenderTo = "containerPartial",
                },
                Title = new Title
                {
                    Text = "Monthly Average Temperature",
                },
                XAxis = new List<XAxis>
                {
                    new XAxis
                    {
                        Categories = new List<string> { "Jan", "Feb", "Mar", "Apr", "May", "Jun",
                                    "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" },

                    }
                },
                YAxis = new List<YAxis>
                {
                    new YAxis
                    {
                        Title = new YAxisTitle
                        {
                            Text = "Temperature (°C)"
                        },
                        PlotLines = new List<YAxisPlotLines>
                        {
                                new YAxisPlotLines
                            {
                                Value = 0,
                                Width = 1,
                                Color = "#808080"
                            }
                        }
                    }
                },
                Series = new List<Series>
                {
                    new LineSeries
                    {
                        Name = "Tokyo",
                        Data = tokyoData,
                    },

                }
            };

            return PartialView("_Index", tmpChart);
        }

Частичное представление "_index.cshtml" находится здесь:

@model Highsoft.Web.Mvc.Charts.Highcharts

@using Highsoft.Web.Mvc.Charts

<h1>Partial loaded</h1>

<div id="containerPartial" style="height: 400px">

    @(Html.Highsoft().Highcharts(Model, "ChartB")

</div>

Если я проверю элементы dom, то внутри старших карт чего-то не хватает

enter image description here

Может быть, кто-то может мне помочь?Огромное спасибо.

Обновление: содержимое div и мой основной вид, где отображается диаграмма, выглядят немного иначе:

enter image description here

И вот ответ от моего ajax-вызова, что нужно загрузить в div "PartialContent":

<h1>Partial loaded</h1>

<div id="containerPartial" style="height: 400px">

    <div id='ChartB' style='height:100;min-width:100;clear:both;margin: 0 auto;'></div><script type='text/javascript'>if (document.addEventListener) {document.addEventListener("DOMContentLoaded", function() {createChartChartB();});} else if (document.attachEvent) {document.attachEvent("onreadystatechange", function(){if (document.readyState === "complete"){document.detachEvent("onreadystatechange", arguments.callee);createChartChartB();}});}function createChartChartB() {var ChartOptions = {"xAxis":[{"categories":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}],"chart":{"height":100,"width":100,"type":"line","renderTo":"ChartB"},"title":{"text":"Monthly Average Temperature"},"series":[{"name":"Tokyo","type":"line","data":[{"y":7},{"y":6.9},{"y":9.5},{"y":14.5},{"y":18.2},{"y":21.5},{"y":25.2},{"y":26.5},{"y":23.3},{"y":18.3},{"y":13.9},{"y":9.6}]}],"yAxis":[{"title":{"text":"Temperature (°C)"},"plotLines":[{"width":1,"color":"#808080","value":0}]}]};new Highcharts.chart("ChartB",ChartOptions);}</script>

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...