Я ищу для создания динамических и интерактивных диаграмм с использованием Javascript. В этом упражнении используется одновременное перемещение/панорамирование нескольких диаграмм. Я реализовал это упражнение с изменением графических библиотек с помощью SVG. Тем не менее, я обнаружил, что когда у меня появилось более 12 карт, панорамирование рендеринга становится вялым. Библиотека Highcharts, похоже, показала огромное отставание. Вот пример того, что я пытаюсь сделать. Это работает с amCharts, кажется, немного лучше. Я добавлю пример с большими примерами в комментарии ниже.
var chart = AmCharts.makeChart("chartdiv", {
"type": "stock",
"theme": "light",
Вероятно, это открытые вопросы:
Существуют ли какие-либо библиотеки, которые могут эффективно выполнять эти функции, динамически перемещая большие и множественные наборы данных?
Будет ли латентность рендеринга этих диаграмм сильно отличаться на холсте HTML5?
ps: 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/
Надеюсь, это поможет.