Highcharts MVC 显示问题

问题描述 投票：0回答：0

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

我试图将它们切换为 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 的容器我真的不确定为什么因为它命中了所有相同的代码。

这是显示的非 ajax 调用的显示内容。

<div class="card-block">
                <div data-ajax="true" data-url="/Home/PortfolioAssetClassNavPercent?clientPortalDataSetID=22&amp;currencyID=11" data-loaded="true"><div id="hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37_container"></div><script type="text/javascript">
var hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37;
$(document).ready(function() {
    var colors_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37 = Highcharts.getOptions().colors;
    var name_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37 = 'NAV % by Asset Class';
    var categories_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37 = ['Debt', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate'];
    var data_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37 = { 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: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }] };
    hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37 = new Highcharts.Chart({
        chart: { renderTo:'hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37_container', defaultSeriesType: 'waterfall', height: 300 }, 
        credits: { enabled: false }, 
        plotOptions: { column: { cursor: 'pointer', dataLabels: { color: colors_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37[0], enabled: false, formatter: function() {return this.y}, style: { fontWeight: 'bold' } }, point: { events: { click: CPC_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37 } } } }, 
        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: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#145783' }], name: 'Investment Structures', color: 'white' }]
    });

    function CPC_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37(){
        var drilldown = this.drilldown;
                      if (drilldown) { // drill down
                        setChart_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37(drilldown.name, drilldown.categories, drilldown.data.data, drilldown.color);
                      } else { // restore
                        setChart_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37(name_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37, categories_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37, data_hc_56e4bb28a2e448d8b7a2f4b1e8ddfd37.data);
                      }
    }

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

</div>
<div id="hc_c8de0c6c51f8491d8e243951c9ed9c91_container" data-highcharts-chart="0" style="overflow: hidden;"><div id="highcharts-1cj32ee-0" dir="ltr" class="highcharts-container " style="position: relative; overflow: hidden; width: 1262px; height: 300px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><svg version="1.1" class="highcharts-root" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="1262" height="300" viewBox="0 0 1262 300"><desc>Created with Highcharts 7.1.2</desc><defs><clipPath id="highcharts-1cj32ee-1-"><rect x="0" y="0" width="1178" height="212" fill="none"></rect></clipPath></defs><rect fill="#ffffff" class="highcharts-background" x="0" y="0" width="1262" height="300" rx="0" ry="0"></rect><rect fill="none" class="highcharts-plot-background" x="74" y="10" width="1178" height="212"></rect><g class="highcharts-pane-group" data-z-index="0"></g><g class="highcharts-grid highcharts-xaxis-grid" data-z-index="1"><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 180.5 10 L 180.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 287.5 10 L 287.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 394.5 10 L 394.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 501.5 10 L 501.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 608.5 10 L 608.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 716.5 10 L 716.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 823.5 10 L 823.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 930.5 10 L 930.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 1037.5 10 L 1037.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 1144.5 10 L 1144.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 1251.5 10 L 1251.5 222" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 73.5 10 L 73.5 222" opacity="1"></path></g><g class="highcharts-grid highcharts-yaxis-grid" data-z-index="1"><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 74 222.5 L 1252 222.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 74 169.5 L 1252 169.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 74 116.5 L 1252 116.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 74 63.5 L 1252 63.5" opacity="1"></path><path fill="none" stroke="#e6e6e6" stroke-width="1" data-z-index="1" class="highcharts-grid-line" d="M 74 9.5 L 1252 9.5" opacity="1"></path></g><rect fill="none" class="highcharts-plot-border" data-z-index="1" x="74" y="10" width="1178" height="212"></rect><g class="highcharts-axis highcharts-xaxis" data-z-index="2"><path fill="none" class="highcharts-axis-line" stroke="#ccd6eb" stroke-width="1" data-z-index="7" d="M 74 222.5 L 1252 222.5"></path></g><g class="highcharts-axis highcharts-yaxis" data-z-index="2"><text x="26.0888671875" data-z-index="7" text-anchor="middle" transform="translate(0,0) rotate(270 26.0888671875 116)" class="highcharts-axis-title" style="color:#666666;fill:#666666;" y="116"><tspan>Percentage %</tspan></text><path fill="none" class="highcharts-axis-line" data-z-index="7" d="M 74 10 L 74 222"></path></g><g class="highcharts-series-group" data-z-index="3"><g data-z-index="0.1" class="highcharts-series highcharts-series-0 highcharts-waterfall-series  highcharts-tracker " transform="translate(74,10) scale(1 1)" clip-path="url(#highcharts-1cj32ee-1-)"><rect x="27.5" y="167.5" width="52" height="44" fill="#145783" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point"></rect><rect x="134.5" y="124.5" width="52" height="44" fill="#D59F20" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point"></rect><rect x="241.5" y="80.5" width="52" height="44" fill="#AFB575" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point"></rect><rect x="348.5" y="36.5" width="52" height="44" fill="#145783" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point"></rect><rect x="455.5" y="-6.5" width="52" height="44" fill="rgb(90,111,94)" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point "></rect><rect x="562.5" y="-50.5" width="52" height="44" fill="rgb(236,107,29)" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point "></rect><rect x="669.5" y="-94.5" width="52" height="44" fill="rgb(175,181,117)" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point "></rect><rect x="776.5" y="-138.5" width="52" height="44" fill="#AFB575" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point"></rect><rect x="884.5" y="-181.5" width="52" height="44" fill="#AFB575" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point"></rect><rect x="991.5" y="-225.5" width="52" height="44" fill="#AFB575" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point"></rect><rect x="1098.5" y="-269.5" width="52" height="44" fill="#AFB575" stroke="#333333" stroke-width="1" opacity="1" class="highcharts-point"></rect><path fill="none" d="M 79.5 167.5 L 134.5 167.5 M 186.5 124.5 L 241.5 124.5 M 293.5 80.5 L 348.5 80.5 M 400.5 36.5 L 455.5 36.5 M 507.5 -6.5 L 562.5 -6.5 M 614.5 -50.5 L 669.5 -50.5 M 721.5 -94.5 L 776.5 -94.5 M 828.5 -138.5 L 884.5 -138.5 M 936.5 -181.5 L 991.5 -181.5 M 1043.5 -225.5 L 1098.5 -225.5" class="highcharts-graph" data-z-index="1" stroke="#333333" stroke-width="1" stroke-dasharray="1,3"></path></g><g data-z-index="0.1" class="highcharts-markers highcharts-series-0 highcharts-waterfall-series  " transform="translate(74,10) scale(1 1)" clip-path="none"></g></g><text x="631" text-anchor="middle" class="highcharts-title" data-z-index="4" style="color:#333333;font-size:18px;fill:#333333;" y="24"></text><text x="631" text-anchor="middle" class="highcharts-subtitle" data-z-index="4" style="color:#666666;fill:#666666;" y="24"></text><g class="highcharts-legend" data-z-index="7" transform="translate(548,256)"><rect fill="none" class="highcharts-legend-box" rx="0" ry="0" x="0" y="0" width="166" height="29" visibility="visible"></rect><g data-z-index="1"><g><g class="highcharts-legend-item highcharts-waterfall-series highcharts-color-undefined highcharts-series-0" data-z-index="1" transform="translate(8,3)"><text x="21" style="color:#333333;cursor:pointer;font-size:12px;font-weight:bold;fill:#333333;" text-anchor="start" data-z-index="2" y="15"><tspan>Investment Structures</tspan></text><rect x="2" y="4" width="12" height="12" fill="white" rx="6" ry="6" class="highcharts-point" data-z-index="3"></rect></g></g></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels" data-z-index="7"><text x="127.54545454545546" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1">Debt</text><text x="234.63636363636545" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="341.7272727272754" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="448.81818181818545" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="555.9090909090955" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="662.9999999999955" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="770.0909090909055" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="877.1818181818155" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="984.2727272727454" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="1091.3636363636456" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text><text x="1198.4545454545455" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="241" opacity="1"><tspan>Real Estate</tspan></text></g><g class="highcharts-axis-labels highcharts-yaxis-labels" data-z-index="7"><text x="59" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="226" opacity="1">0</text><text x="59" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="173" opacity="1">25</text><text x="59" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="120" opacity="1">50</text><text x="59" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="67" opacity="1">75</text><text x="59" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="end" transform="translate(0,0)" y="14" opacity="1">100</text></g><g class="highcharts-label highcharts-tooltip highcharts-color-undefined" style="pointer-events:none;white-space:nowrap;" data-z-index="8" transform="translate(515,-9999)" opacity="0" visibility="visible"><path fill="none" class="highcharts-label-box highcharts-tooltip-box highcharts-shadow" d="M 3.5 0.5 L 34.5 0.5 40.5 -5.5 46.5 0.5 78 0.5 C 81.5 0.5 81.5 0.5 81.5 3.5 L 81.5 46.5 C 81.5 49.5 81.5 49.5 78.5 49.5 L 3.5 49.5 C 0.5 49.5 0.5 49.5 0.5 46.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path><path fill="none" class="highcharts-label-box highcharts-tooltip-box highcharts-shadow" d="M 3.5 0.5 L 34.5 0.5 40.5 -5.5 46.5 0.5 78 0.5 C 81.5 0.5 81.5 0.5 81.5 3.5 L 81.5 46.5 C 81.5 49.5 81.5 49.5 78.5 49.5 L 3.5 49.5 C 0.5 49.5 0.5 49.5 0.5 46.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path><path fill="none" class="highcharts-label-box highcharts-tooltip-box highcharts-shadow" d="M 3.5 0.5 L 34.5 0.5 40.5 -5.5 46.5 0.5 78 0.5 C 81.5 0.5 81.5 0.5 81.5 3.5 L 81.5 46.5 C 81.5 49.5 81.5 49.5 78.5 49.5 L 3.5 49.5 C 0.5 49.5 0.5 49.5 0.5 46.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path><path fill="rgba(247,247,247,0.85)" class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 34.5 0.5 40.5 -5.5 46.5 0.5 78 0.5 C 81.5 0.5 81.5 0.5 81.5 3.5 L 81.5 46.5 C 81.5 49.5 81.5 49.5 78.5 49.5 L 3.5 49.5 C 0.5 49.5 0.5 49.5 0.5 46.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#5A6F5E" stroke-width="1"></path><text x="8" data-z-index="1" style="font-size:12px;color:#333333;cursor:default;fill:#333333;" y="20"><tspan style="font-weight:bold">Real Estate</tspan><tspan x="8" dy="15">20.61%</tspan></text></g></svg></div></div><script type="text/javascript">
var hc_c8de0c6c51f8491d8e243951c9ed9c91;
$(document).ready(function() {
    var colors_hc_c8de0c6c51f8491d8e243951c9ed9c91 = Highcharts.getOptions().colors;
    var name_hc_c8de0c6c51f8491d8e243951c9ed9c91 = 'NAV % by Asset Class';
    var categories_hc_c8de0c6c51f8491d8e243951c9ed9c91 = ['Debt', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate', 'Real Estate'];
    var data_hc_c8de0c6c51f8491d8e243951c9ed9c91 = { 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: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }] };
    hc_c8de0c6c51f8491d8e243951c9ed9c91 = new Highcharts.Chart({
        chart: { renderTo:'hc_c8de0c6c51f8491d8e243951c9ed9c91_container', defaultSeriesType: 'waterfall', height: 300 }, 
        credits: { enabled: false }, 
        plotOptions: { column: { cursor: 'pointer', dataLabels: { color: colors_hc_c8de0c6c51f8491d8e243951c9ed9c91[0], enabled: false, formatter: function() {return this.y}, style: { fontWeight: 'bold' } }, point: { events: { click: CPC_hc_c8de0c6c51f8491d8e243951c9ed9c91 } } } }, 
        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: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }, { name: 'Real Estate', y: 20.608234098092029195172472580, color: '#AFB575' }], name: 'Investment Structures', color: 'white' }]
    });

    function CPC_hc_c8de0c6c51f8491d8e243951c9ed9c91(){
        var drilldown = this.drilldown;
                      if (drilldown) { // drill down
                        setChart_hc_c8de0c6c51f8491d8e243951c9ed9c91(drilldown.name, drilldown.categories, drilldown.data.data, drilldown.color);
                      } else { // restore
                        setChart_hc_c8de0c6c51f8491d8e243951c9ed9c91(name_hc_c8de0c6c51f8491d8e243951c9ed9c91, categories_hc_c8de0c6c51f8491d8e243951c9ed9c91, data_hc_c8de0c6c51f8491d8e243951c9ed9c91.data);
                      }
    }

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


            </div>

没有创建容器的任何原因？

javascript asp.net asp.net-mvc model-view-controller highcharts
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.