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

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 网站并发现了一种名为“Sparkline" and the jsFiddle example 的图表类型显示了一种可以使用 setTimout 延迟渲染然后在 "chunks" 中渲染它们的方法。

为了按照我需要的方式进行这项工作，我必须从脚本中删除所有数据（或至少从 item. 中填充的所有数据），然后添加 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 来匹配图表 ID 和容器 ID：

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

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

How to render multiple HighCharts using a queue to prevent long load times

javascript

jquery

highcharts