我正在寻找使用 Javascript 构建动态且交互式的多个图表。在此练习中涉及同时移动/平移多个图表。我已经使用 SVG 和各种图表库实现了这个练习。然而,我发现当我开始拥有超过 12 个图表时,平移渲染变得缓慢。 Highcharts 库似乎显示出巨大的滞后。这是我正在尝试做的一个例子。这是与 amCharts 一起运行的,似乎好一点。稍后我将在下面的评论中添加 highcharts 示例。
var chart = AmCharts.makeChart("chartdiv", {
"type": "stock",
"theme": "light",
<小时/>
这些可能是开放式问题:
是否有任何库可以有效地实现这些功能,动态移动大型和多个数据集?
这些图表在 HTML5 Canvas 上的渲染延迟会有很大不同吗?
ps:第一次发帖,如果我做错了什么,请告诉我:)
最佳答案
既然您提到了 amCharts,我的回答将与该 vendor 相关。我强烈建议您修改您的问题,使其不再是推荐请求(这违反了 SO 规则),而是有关实现细节的具体问题。
无论如何,每个图表,无论使用什么 vendor 或渲染技术,都会占用资源。拥有许多图表会累积起来,迟早会导致您的 Web 应用程序崩溃。
话虽如此,您可以通过多种方法来解决这个问题。
延迟加载
它的工作原理是延迟图表初始化,直到它实际可见。
这是一个关于如何在 amCharts 中实现延迟加载的很好的示例和评论。
https://www.amcharts.com/kbase/lazy-loading-120-charts-page/
您会发现在一个页面上放置 120 个图表效果非常好。
菊花链图表初始化/更新
最大的问题不是计算机无法处理 100 个图表,而是它们同时开始初始化。 Init 是一个非常消耗资源的操作。将其乘以 100 即可获得锁定。
解决方案是“菊花链”图表初始化。它的工作原理是对图表初始化和更新进行排队。仅当前一个图表构建完成后,图表构建才会开始。
类似这样的事情:
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();
这是菊花链图表更新的另一个教程/演示:
https://www.amcharts.com/kbase/optimizing-multi-chart-periodically-updated-dashboards/
希望对您有所帮助。
关于javascript - 多个图表延迟问题,SVG 还是 HTML5 Canvas?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44491378/