Недавно я опубликовал статью о различных библиотеках JavaScript для Dashboards. В этой статье я собираюсь продемонстрировать, как мы можем создать информационную панель с перетаскиванием визуальных элементов и экспортом с помощью JavaScript.

Я собираюсь использовать библиотеку Gridster для создания дашборда. Я использовал эту библиотеку в своих проектах, и она мне показалась простой и гибкой.

Есть много способов представления данных. Если ваш программный продукт требует больших объемов данных, вам нужно будет найти способ упростить визуализацию этих данных. Вот тут-то и пригодятся визуализации - например, представление данных в виде диаграмм, графиков и т. Д. Я буду использовать Chart.js для создания диаграмм, который представляет собой простую и гибкую библиотеку диаграмм JavaScript.

Для экспорта панели я буду использовать jsPDF, клиентскую библиотеку JavaScript. Он позволяет экспортировать статическое изображение веб-страницы в файл PDF. Кроме того, мне нужно будет использовать html2canvas, чтобы распечатать графики в формате PDF. Но если вы хотите распечатать простые изображения или данные, достаточно одного jsPDF.

Без лишних слов, давайте перейдем к кодированию!

Создание панели инструментов

Добавьте зависимость Gridster, загрузив с GitHub, или просто включите исходный код по ссылкам cdnjs. Поскольку Gridster - это плагин jQuery, вы также должны включить библиотеку jQuery!

Во-первых, давайте добавим следующий фрагмент в ‹body› HTML.

‹Div class =” сетка ”›

‹Button id =” export ”› Экспорт ‹/button›

<ul>

‹Li data-row =» 1 data-col = »1 data-sizex =» 5 data-sizey = »6›

‹Id холста =” chart1 ›‹/canvas›

</li>

‹Li data-row =» 1 data-col = »5 data-sizex =» 5 data-sizey = »6›

‹Id холста =” chart2 ›‹/canvas›

</li>

‹Li data-row =» 7 data-col = »1 data-sizex =» 5 data-sizey = »5›

‹Id холста =” chart3 ›‹/canvas›

</li>

‹Li data-row =» 7 data-col = »6 data-sizex =» 5 data-sizey = »5›

‹Id холста =” chart4 ›‹/canvas›

</li>

</ul>

‹/Div›

А пока забудем об элементах холста и <button>, которые мы рассмотрим позже в этой статье. Gridster создается следующим образом.

// создать экземпляр сетки

$ (". Сетка› ул "). Сетка ({

widget_margins: [8, 8],

widget_base_dimensions: [100, 55]

});

Здесь элементы ‹li› будут преобразованы в виджеты. Пока мы получим только пустые виджеты. Давайте добавим данные в наши виджеты.

Создание диаграмм

Мы собираемся использовать ранее определенные элементы холста для создания диаграмм. Давайте посмотрим на реализацию первого виджета.

Сначала добавьте зависимости, загрузив последнюю версию Chart.js на GitHub или просто воспользуйтесь этими ссылками Chart.js CDN. Вот наш код JavaScript.

var canvas = document.getElementById («диаграмма1»). getContext («2d»);

новая диаграмма (холст, {

тип: «линия»,

данные: {

ярлыки: [«A», «B», «C», «O», «G», «W», «S»],

наборы данных: [{

ярлык: «Компания А»,

данные: [12, 19, 3, 17, 6, 3, 7],

backgroundColor: «rgba (182, 213, 139, 0,5)»

}, {

ярлык: «Компания Б»,

данные: [2, 29, 5, 5, 2, 3, 10],

backgroundColor: «rgba (182, 133, 139, 1)»

}]

}

});

Здесь важен параметр тип, поскольку он указывает тип диаграммы, которую мы хотим создать. Наш виджет будет таким.

Для реализации остальных виджетов обратитесь к исходному коду на GitHub.

Экспорт

Давайте посмотрим на функцию экспорта. Включите ссылки на jsPdf и html2canvas в HTML. Мы прикрепим событие щелчка к <button> и создадим экземпляр jsPdf. Вот наш код JavaScript.

$ («# Export»). On («click», function () {
// создать экземпляр jsPDF
var doc = new jsPDF ();
doc.addHTML ($ («ul ”), 15, 15, {
'background': '#fff',
}, function () {
doc.save ('dashboard.pdf');
});
});

Здесь мы указали элемент ‹ul› внутри addHTML (), который мы хотим распечатать в файле PDF.

Снимок экрана панели инструментов выглядит следующим образом.

А скриншот PDF выглядит следующим образом.

Проверьте живую демонстрацию здесь и полный исходный код демонстрации здесь.

Резюме

Это был подробный обзор реализации панели инструментов с комбинацией нескольких популярных библиотек JavaScript. Возможно, нет необходимости использовать их все вместе в своих проектах. Каждую описанную здесь библиотеку можно использовать независимо в зависимости от потребностей проекта.

Эта статья изначально была опубликована на сайте techshard.com.