首页 文章

多个图表延迟问题，SVG或HTML5画布？

提问于
浏览 次
1

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

jsfiddle

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

这些可能是开放式问题：

  • 是否有任何库可以有效地执行这些功能，动态移动大型和多个数据集？

  • 这些图表的渲染延迟会在HTML5 Canvas上大不相同吗？

ps：第一次发布海报，让我知道我做错了什么:)

javascript canvas svg charts amcharts

1 回答

  • 1

    既然你提到了amCharts，我的回答将与这个供应商有关 . 我强烈建议你修改你的问题，这不是推荐请求（违反SO规则），而是关于实现细节的具体问题 .

    无论如何，每个图表，无论使用何种供应商或渲染技术，都会占用资源 . 有很多图表会加起来，迟早会降低你的网络应用程序 .

    话虽如此，有很多方法可以解决这个问题 .

    延迟加载

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

    这是一个很好的例子，并评论了如何在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/

    我希望有所帮助 .

    回复于

相关问题