Проблема задержки в нескольких графиках, SVG или HTML5 Canvas?

Question

Проблема задержки в нескольких графиках, SVG или HTML5 Canvas?

1

Я ищу для создания динамических и интерактивных диаграмм с использованием Javascript. В этом упражнении используется одновременное перемещение/панорамирование нескольких диаграмм. Я реализовал это упражнение с изменением графических библиотек с помощью SVG. Тем не менее, я обнаружил, что когда у меня появилось более 12 карт, панорамирование рендеринга становится вялым. Библиотека Highcharts, похоже, показала огромное отставание. Вот пример того, что я пытаюсь сделать. Это работает с amCharts, кажется, немного лучше. Я добавлю пример с большими примерами в комментарии ниже.

jsfiddle

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

Вероятно, это открытые вопросы:

Существуют ли какие-либо библиотеки, которые могут эффективно выполнять эти функции, динамически перемещая большие и множественные наборы данных?
Будет ли латентность рендеринга этих диаграмм сильно отличаться на холсте HTML5?

ps: 1-й раз, дайте мне знать, если я делаю что-то неправильно :)

Alan Chang 12 июнь 2017, в 06:38

Источник

Теги:

javascript

svg

canvas

charts

amcharts

1 ответ

Ещё вопросы

martynasma · Answer 1 · 2017-06-12T06-50-00.000Z

Поскольку вы упомянули 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/

Надеюсь, это поможет.