MVC ajax highcharts 显示问题

Question

所以我的图表在我的页面加载中工作。但是它非常慢，因为我在页面显示之前加载了每个图表。

我试图将它们切换为 ajax 调用。页面加载速度更快，但由于某种原因图表不会显示。

<div data-ajax="true" data-url="@Url.Action(nameof(HomePageController.Portfolio_NAVPercent_By_AssetClass), nameof(HomePageController).GetControllerName(), new { clientPortalDataSetID = Model.SelectedDataSet.TCPD_ClientPortalDataSetID, currencyID = Model.CPR_PerformancePeriod.Currency_CURR_GlobalCurrencyID_FK })"></div>
              @{Html.RenderAction(nameof(HomePageController.Portfolio_NAVPercent_By_AssetClass), nameof(HomePageController).GetControllerName(), new { clientPortalDataSetID = Model.SelectedDataSet.TCPD_ClientPortalDataSetID, currencyID = Model.CPR_PerformancePeriod.Currency_CURR_GlobalCurrencyID_FK });}
    

最上面的是使用数据属性的新 ajax 调用。 IT 以完全相同的方式实现每个功能。没有错误，但它只会显示空白

这是实际页面上显示的内容。

  <div data-ajax="true" data-url="/Home/PortfolioAssetClassNavPercent?clientPortalDataSetID=22&amp;currencyID=11" data-loaded="true"><div id="hc_ef1ec1e3c33f4259863c62db7dc9705c_container"></div><script type="text/javascript">
var hc_ef1ec1e3c33f4259863c62db7dc9705c;
$(document).ready(function() {
    var colors_hc_ef1ec1e3c33f4259863c62db7dc9705c = Highcharts.getOptions().colors;
    var name_hc_ef1ec1e3c33f4259863c62db7dc9705c = 'NAV % by Asset Class';
    var categories_hc_ef1ec1e3c33f4259863c62db7dc9705c = ['Debt', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate'];
    var data_hc_ef1ec1e3c33f4259863c62db7dc9705c = { data: [{ name: 'Debt', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#D59F20' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#EC6B1D' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }] };
    hc_ef1ec1e3c33f4259863c62db7dc9705c = new Highcharts.Chart({
        chart: { renderTo:'hc_ef1ec1e3c33f4259863c62db7dc9705c_container', defaultSeriesType: 'waterfall', height: 300 }, 
        credits: { enabled: false }, 
        plotOptions: { column: { cursor: 'pointer', dataLabels: { color: colors_hc_ef1ec1e3c33f4259863c62db7dc9705c[0], enabled: false, formatter: function() {return this.y}, style: { fontWeight: 'bold' } }, point: { events: { click: CPC_hc_ef1ec1e3c33f4259863c62db7dc9705c } } } }, 
        title: { text: '' }, 
        tooltip: { formatter: function() { return this.points.reduce(function(s, point){return s + '<br/>' +FormatPercent(point.y);}, '<b>' + this.x + '</b>');}, shared: true }, 
        xAxis: { categories: ['Debt', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate'] }, 
        yAxis: { allowDecimals: true, max: 100, min: 0, title: { text: 'Percentage %' } }, 
        series: [{ data: [{ name: 'Debt', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#D59F20' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#EC6B1D' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#5A6F5E' }], name: 'Investment Structures', color: 'white' }]
    });

    function CPC_hc_ef1ec1e3c33f4259863c62db7dc9705c(){
        var drilldown = this.drilldown;
                      if (drilldown) { // drill down
                        setChart_hc_ef1ec1e3c33f4259863c62db7dc9705c(drilldown.name, drilldown.categories, drilldown.data.data, drilldown.color);
                      } else { // restore
                        setChart_hc_ef1ec1e3c33f4259863c62db7dc9705c(name_hc_ef1ec1e3c33f4259863c62db7dc9705c, categories_hc_ef1ec1e3c33f4259863c62db7dc9705c, data_hc_ef1ec1e3c33f4259863c62db7dc9705c.data);
                      }
    }

    function setChart_hc_ef1ec1e3c33f4259863c62db7dc9705c(name, categories, data, color){
        hc_ef1ec1e3c33f4259863c62db7dc9705c.xAxis[0].setCategories(categories);hc_ef1ec1e3c33f4259863c62db7dc9705c.series[0].remove();hc_ef1ec1e3c33f4259863c62db7dc9705c.addSeries({
                         name: name,
                         data: data,
                         color: color || 'white'
                      });
    }
});
</script>

</div>

似乎使用 ajax 调用不会加载用于 highcharts 的容器我真的不确定为什么因为它命中了所有相同的代码。

容器未装满的任何原因？

这里还有创建图表的功能。

   public static ChartBuilderResult Client_NAVPercent_By_AssetClass(ConfigurationModels.BaseSettings Configuration)
        {
            string uniqueChartName = $"hc_{DisplayHelpers.HTMLSafeUniqueID()}";

            var result = Configuration.Client.Client_AssetClass_Percentage_NAV();

            int counter = 0;
            string[] categories = result.Select(x => x.CategoryName).ToArray();
            const string NAME = "NAV % by Asset Class";

            var seriesData = new List<object>();
            foreach (var region in result)
            {
                seriesData.Add(new
                {
                    name = region.CategoryName,
                    y = region.CategoryCount,
                    Color = System.Drawing.Color.FromName($"colors_{uniqueChartName}[" + counter.ToString() + "]")
                });
                counter++;
            }

            Data data = new Data(seriesData.ToArray());

            Highcharts chart = new Highcharts(uniqueChartName)
                .InitChart(new Chart { DefaultSeriesType = ChartTypes.Waterfall, Height = 300 })
                .SetCredits(new Credits { Enabled = false })
                .SetExporting(new Exporting
                {
                    Enabled = Configuration.Client.CanExportData
                })
                .SetTitle(new Title { Text = "" })
                .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Percentage %" }, Min = 0, Max = 100, AllowDecimals = true })
                .SetTooltip(new Tooltip
                {
                    Shared = true,
                    Formatter = "function() " +
                    "{ " +
                        "return this.points.reduce(function(s, point){" +
                            "return s + '<br/>' +" +
                                "FormatPercent(point.y);" +
                            "}, '<b>' + this.x + '</b>');" +
                    "}"
                })
                .SetXAxis(new XAxis { Categories = categories })
                .SetPlotOptions(new PlotOptions { Pie = new PlotOptionsPie { Shadow = false } })
                 //.SetTooltip(new Tooltip { Formatter = $"TT_{uniqueChartName}" })
                 .SetPlotOptions(new PlotOptions
                 {
                     Column = new PlotOptionsColumn
                     {
                         Cursor = Cursors.Pointer,
                         Point = new PlotOptionsColumnPoint { Events = new PlotOptionsColumnPointEvents { Click = $"CPC_{uniqueChartName}" } },
                         DataLabels = new PlotOptionsColumnDataLabels
                         {
                             Enabled = false,
                             Color = System.Drawing.Color.FromName($"colors_{uniqueChartName}[0]"),
                             Formatter = "function() {return this.y}",
                             Style = "fontWeight: 'bold'"
                         }
                     }
                 })
                 .SetSeries(new Series
                 {
                     Name = "Asset Classes",
                     Data = data,
                     Color = System.Drawing.Color.White,
                 })
                .AddJavascripFunction(
                    $"CPC_{uniqueChartName}",
                    @"var drilldown = this.drilldown;
                      if (drilldown) { // drill down
                        setChart_" + uniqueChartName + @"(drilldown.name, drilldown.categories, drilldown.data.data, drilldown.color);
                      } else { // restore
                        setChart_" + uniqueChartName + @"(name_" + uniqueChartName + @", categories_" + uniqueChartName + @", data_" + uniqueChartName + @".data);
                      }"
                )
                .AddJavascripFunction(
                    $"setChart_{uniqueChartName}",
                    uniqueChartName + $@".xAxis[0].setCategories(categories);"
                      + uniqueChartName + @".series[0].remove();"
                      + uniqueChartName + @".addSeries({
                         name: name,
                         data: data,
                         color: color || 'white'
                      });",
                    $"name", $"categories", $"data", $"color"
                )
                .AddJavascripVariable($"colors_{uniqueChartName}", "Highcharts.getOptions().colors")
                .AddJavascripVariable($"name_{uniqueChartName}", "'{0}'".FormatWith(NAME))
                .AddJavascripVariable($"categories_{uniqueChartName}", JsonSerializer.Serialize(categories))
                .AddJavascripVariable($"data_{uniqueChartName}", JsonSerializer.Serialize(data));

            return new ChartBuilderResult
            {
                ChartCompleted = true,
                Chart = chart
            };
        }