Multiple Charts Latency issue, SVG or HTML5 Canvas?

问题

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.

jsfiddle

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?
Will these charts' rendering latency be much different on HTML5 Canvas?

ps: 1st time poster, let me know if I'm doing anything wrong :)

回答1:

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.

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.

Lazy-loading

It works by delaying chart initialization until it is actually visible.

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/

You'll see that having 120 charts on a single page works flawlessly.

Daisy-chaining chart init/update

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.

Something like this:

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/optimizing-multi-chart-periodically-updated-dashboards/

I hope that helps.

来源：https://stackoverflow.com/questions/44491378/multiple-charts-latency-issue-svg-or-html5-canvas

标签

javascript