Question

我正在使用MVC Razor foreach来渲染图表，有时超过150。

这是我生成脚本的方式：

@{chartCount = 0;}
@foreach (var item in Model.ChartRows.Where(m => !m.SummaryRow))
    { 
        $('#container_@(chartCount)').highcharts({ 
             //code removed for brevity
        });  
        chartCount++;
    }

然后在我的HTML中，我用它来渲染容器：

@for (int i = 0; i < chartCount; i++)
    {
        <div id="container_@(i)"></div><br />
    }

但是，如果ChartRows中有100个项目，则在突然显示所有图表之前，该页面可能需要很长时间才能加载。我查看了HighCharts网站，发现了一个名为＆＃34; Sparkline＆＃34;的图表类型。并且jsFiddle example显示了一种方法，可以使用setTimout使用item.延迟渲染，然后将其渲染到＆＃34;块＆＃34;中。

让我以我需要的方式完成这项工作，我将不得不从脚本中删除所有数据（或至少从{{1}}填充任何内容），而是添加7+数据属性到每个HTML容器并使用jQuery来获取这些数据属性以填充图表数据。我对这种方法并不感到兴奋，因为它可以让你排除故障。

有没有人知道是否可以将每个正在渲染的图表添加到某种队列中，以便一次渲染1个而不是浏览器同时渲染它们？

Answer 1

我就这样做了：

<script> 
var chartFunctions = [];
@foreach (var item in Model.ChartRows.Where(m => !m.SummaryRow))
{ 
    var chart_@(item.ID) = function () {
        $('#container_@(item.ID)').highcharts({ 
             //code removed for brevity
        });
    }
    //add this function into the array
    chartFunctions.push(chart_@(item.ID));  
}


    function renderCharts() {
        var time = +new Date(),
            len = chartFunctions.length; 

        for (i = 0; i < len; i += 1) {

            //call each function in the function array
            chartFunctions[i]();

            // If the process takes too much time
            if (new Date() - time > 500) { 
                chartFunctions.splice(0, i + 1);
                setTimeout(renderCharts, 0);
                break;
            }
        }
    }

    renderCharts();
</script>

我还需要使用foreach来匹配chartID和containerID：

@foreach (var item in Model.ChartRows.Where(m => !m.SummaryRow))
{ 
    <div id="container_@(item.ID)"></div><br />
}

如何使用队列呈现多个HighCharts以防止长时间加载

1 个答案: