多个图表延迟问题，SVG 还是 HTML5 Canvas？

我正在寻找使用 Javascript 构建动态且交互式的多个图表。在此练习中涉及同时移动/平移多个图表。我已经使用 SVG 和各种图表库实现了这个练习。然而，我发现当我开始拥有超过 12 个图表时，平移渲染变得缓慢。 Highcharts 库似乎显示出巨大的滞后。这是我正在尝试做的一个例子。这是与 amCharts 一起运行的，似乎好一点。稍后我将在下面的评论中添加 highcharts 示例。

jsfiddle https://jsfiddle.net/alanchang87/4chLr1dy/6/

var chart = AmCharts.makeChart("chartdiv", {
  "type": "stock",
  "theme": "light",

这些可能是开放式问题：

1. 是否有任何库可以有效地实现这些功能，动态移动大型和多个数据集？

2. 这些图表在 HTML5 Canvas 上的渲染延迟会有很大不同吗？

ps：第一次发帖，如果我做错了什么，请告诉我:)

既然您提到了 amCharts，我的回答将与该供应商相关。我强烈建议您修改您的问题，这样它就不是建议请求（这违反了 SO 规则），而是有关实现细节的具体问题。

无论如何，每个图表，无论供应商或使用的渲染技术如何，都会占用资源。拥有许多图表会累积起来，迟早会导致您的 Web 应用程序崩溃。

话虽这么说，有很多方法可以解决这个问题。

延迟加载

它的工作原理是延迟图表初始化，直到它实际可见。

这是关于如何在 amCharts 中实现延迟加载的一个很好的示例和评论。

https://www.amcharts.com/kbase/lazy-loading-120-charts-page/ 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/ https://www.amcharts.com/kbase/optimizing-multi-chart-periodically-updated-dashboards/

我希望这有帮助。