多个图表延迟问题，SVG或HTML5 Canvas? [英] Multiple Charts Latency issue, SVG or HTML5 Canvas?
问题描述
我正在寻找使用Javascript构建动态和交互式的多个图表的方法.在本练习中，将涉及同时移动/平移多个图表.我已经使用SVG的各种图表库实现了此练习.但是，我发现当我开始拥有超过12张图表时，平移渲染变得缓慢. Highcharts库似乎显示出巨大的滞后.这是我要尝试做的一个示例.用amCharts进行运行，似乎要好一些.稍后，我将在注释中添加highcharts示例.
I'm looking to build a dynamic and interactive multiple charts using Javascript. In this exercise involves moving/panning multiple charts simultaneously. I've implemented this exercise with varies charting libraries with SVG. However, I found when I started to have more than 12 charts, while panning the rendering become sluggish. Highcharts library seems to shown huge lag. Here is an example of what I'm trying to do.. This is running with amCharts, seems to be a little better. I'll add highcharts example in comment below later.
var chart = AmCharts.makeChart("chartdiv", {
"type": "stock",
"theme": "light",
这些可能是开放式问题:
These are probably open ended questions:
-
是否有任何库可以有效地执行这些功能，从而动态移动大型和多个数据集?
Are there any libraries can effectively do these features, dynamically moving large and multiple data sets?
这些图表的呈现延迟在HTML5 Canvas上会大不相同吗?
Will these charts' rendering latency be much different on HTML5 Canvas?
ps:第一次张贴，请告诉我是否做错了:)
ps: 1st time poster, let me know if I'm doing anything wrong :)
推荐答案
由于您提到了amCharts，因此我的答案将与此供应商有关.我强烈建议您修改问题，因此它不是建议的要求(违反SO规则)，而是有关实现细节的特定问题.
Since you mentioned amCharts, my answer is going to be related to this vendor. I strongly suggest you revise your question so it's not a request for recommendation (which is against SO rules), but rather a specific question about implementation details.
在任何情况下，无论使用哪种供应商或渲染技术，每个图表都占用资源.拥有许多图表将加起来，或早或晚关闭您的Web应用程序.
In any case, every chart, regardless of vendor or rendering technology used, takes up resources. Having many charts will add up and will bring down your web application sooner or later.
话虽这么说，您可以通过多种方法来解决这个问题.
That being said there is a number of ways you can work around that.
它通过延迟图表初始化直到它实际可见来工作.
It works by delaying chart initialization until it is actually visible.
这是一个很好的示例，并评论了如何在amCharts中实现延迟加载.
Here's a good example and comment about how lazy-loading can be implemented in amCharts.
https://www.amcharts.com/kbase/lazy-loading-120-charts-page/
您会发现在一页上包含120个图表是完美的.
You'll see that having 120 charts on a single page works flawlessly.
最大的问题不是计算机不能处理100个图表，而是它们都立即开始初始化.初始化是一个非常占用资源的操作.将其乘以100，您将获得锁定.
The biggest issue is not that a computer can't handle 100 charts, but that they all start initializing at once. Init is a very resource-heavy operation. Multiply it by 100 and you get a lockup.
解决方案是菊花链"图表初始化.它通过对图表初始化和更新进行排队来工作.仅在上一个图表的构建完成后才开始构建图表.
The solution is to "daisy-chain" chart initialization. It works by queuing chart inits and updates. The chart build is started only when the build of the previous chart is finished.
类似这样的东西:
var chartQueue = [];
function addChart( container, config ) {
chartQueue.push( {
container: container,
config: config;
} )
}
function processChart() {
var chart;
if ( chart = chartQueue.shift() ) {
var chartObj = AmCharts.makeChart( chart.container, chart.config );
chartObj.addListener( "rendered", function() {
setTimeout( processChart, 100 );
} );
}
}
addChart( "chart1", {/* config */} );
addChart( "chart2", {/* config */} );
addChart( "chart3", {/* config */} );
addChart( "chart4", {/* config */} );
addChart( "chart5", {/* config */} );
processChart();
这是菊花链图表更新的另一个教程/演示:
And here's another tutorial/demo of daisy-chained chart updates:
https://www.amcharts.com/kbase/优化多图表定期更新的仪表板/
我希望能帮上忙.
这篇关于多个图表延迟问题，SVG或HTML5 Canvas?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
