Учебник по детализации FusionCharts в jQuery

Опубликовано: 2022-03-11

Визуализация данных упрощает чтение

При анализе данных большинство компаний полагаются на MS Excel или Google Sheets. Несмотря на то, что это мощные инструменты, трудно заметить тенденции, а тем более разобраться в больших рядах данных электронных таблиц. Работать с данными, представленными таким образом, не очень интересно, но как только вы добавите визуализацию к этим данным, управлять ими станет проще, и это тема сегодняшнего урока — создание интерактивных диаграмм с помощью jQuery.

Трудно заметить тенденции по строкам данных электронной таблицы, но как только вы добавите визуализацию...

Твитнуть

Я буду использовать библиотеку диаграмм JavaScript FusionCharts для этого проекта, поскольку она предлагает большую библиотеку из более чем 90 диаграмм, совместима со всеми браузерами и с ней довольно легко работать. Он также предлагает специальный плагин для jQuery, который облегчит нашу работу.

Я начну с создания базовой диаграммы, используя основную библиотеку JavaScript FusionCharts и ее плагин jQuery charts, а затем добавлю к ней возможность детализации. Детализация позволяет переходить от одной диаграммы к другой, щелкая график данных.

Термин «график данных» зависит от контекста; это относится к столбцу в столбчатой диаграмме, линиям в линейной диаграмме, сегментам круговой диаграммы. Щелкнув график данных на родительской диаграмме, вы увидите дочернюю диаграмму, показывающую относительные данные на один уровень глубже.

Если щелкнуть график данных на родительской диаграмме, откроется дочерняя диаграмма.

Понимание FusionCharts

Прежде чем мы начнем учебник, давайте рассмотрим базовую анатомию FusionCharts. Каждая диаграмма состоит из следующих ключевых элементов:

Надпись: Заголовок на графике. Это объясняет, что наносится на карту.
Подзаголовок: текст под заголовком, определяющий дополнительную информацию о диаграмме, часто в нем указывается период времени, за который были собраны данные.
Легенда: отображает символ для каждого графика данных на диаграмме. Конкретный график можно включить или отключить, щелкнув соответствующий значок легенды.
График данных: это представление данных на диаграмме. График данных может быть столбцом в столбчатой диаграмме, линиями в линейной диаграмме или сегментами круговой диаграммы.
Подсказка: текст, который появляется при наведении курсора на график данных и используется для передачи дополнительной информации об этом конкретном графике данных.

Создание детализированной диаграммы

Прежде чем мы начнем, вот скриншот диаграммы, которую мы будем делать в этом уроке. Вы можете увидеть JSFiddle здесь или получить доступ к полному исходному коду проекта в моем репозитории GitHub.

Предварительный просмотр финального проекта jquery этого руководства.

Я разделил процесс создания детализированной диаграммы на пять шагов, так что давайте начнем.

Шаг 1. Включение файлов JavaScript и создание контейнера диаграммы

Во-первых, нам нужно включить все файлы JS, от которых зависит наш проект, с помощью <script> . Если страница еще не существует, создайте пустой HTML-документ и включите следующие файлы в раздел <head> . Теперь нам нужны следующие четыре файла:

Минимизированный jQuery
Основная JS-библиотека FusionCharts (включая fusioncharts.js и fusioncharts.charts.js )
Плагин FusionCharts jQuery

Наш раздел <head> теперь будет выглядеть так:

 <!-- jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- FusionCharts JS file --> <script type="text/javascript" src="js/fusioncharts.js"></script> <script type="text/javascript" src="js/fusioncharts.charts.js"></script> <!-- jQuery charts plugin --> <script type="text/javascript" src="js/jquery-plugin.js"></script> <!-- custom theme file (optional) --> <script type="text/javascript" src="js/toptal.js"></script>

Теперь, когда у нас есть все зависимости, пришло время создать контейнер <div> для диаграммы и встроить его на нашу страницу с помощью следующего HTML-кода:

 <div>drill-down chart will load here</div>

Теперь мы можем выбрать его с помощью селектора jQuery $ внутри кода:

 $("#drill-down-chart")

Примечание. Если на вашей странице несколько диаграмм, вам потребуется отдельный контейнер для каждой диаграммы с уникальным id .

Шаг 2: Получение и структурирование данных

FusionCharts принимает данные как в формате JSON, так и в формате XML, но я решил использовать JSON, поскольку он стал стандартным форматом для обмена данными между веб-приложениями. Массив данных JSON для базовой диаграммы содержит объект для каждого графика данных, и внутри каждого объекта графика данных мы определяем его соответствующую метку и значение. Эта структура выглядит так:

 "data": [{ "label": "Q1", "value": "850000", }, { "label": "Q2", "value": "2070000", },... // more data objects ]

По мере того, как мы строим нашу детализированную диаграмму, ее JSON становится все более сложным. Связь между родительской и дочерней диаграммами требует еще одной пары key - value внутри каждого объекта массива данных. Новый ключ (неудивительно, что он называется link ) будет содержать идентификатор дочерней диаграммы, которую вы получите, когда щелкнете ее родительский график данных. Формат для определения id дочерней диаграммы — newchart-dataFormat-childId . Поскольку мы используем JSON, мы знаем, что все, что мы связываем, будет выглядеть как newchart-json-childId . Вот как мы определяем это для нашей диаграммы:

 "data": [{ "label": "Q1", "value": "850000", "link": "newchart-json-q1" }, { "label": "Q2", "value": "2070000", "link": "newchart-json-q2" }, ... // more data objects]

Шаг 3: Вставка данных диаграммы

Когда у вас есть готовые данные, пришло время вставить диаграмму на вашу страницу, используя метод insertFusionCharts , предоставляемый подключаемым модулем jQuery:

 $("#drill-down-chart").insertFusionCharts({ type: 'column2d', id: "mychart", width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Quarterly Revenue for 2015", "paletteColors": "#9EA5FC", "xAxisName": "Quarter (Click to drill down)", "yAxisName": "Revenue (In USD)", // more chart configuration options }, "data": [ // see step-2 for explanation ], "linkedData": [ // explained in step-4 ] } })

Разберем приведенный выше фрагмент кода:

type определяет тип родительской диаграммы, которую мы строим. В этом случае column2d . Каждая диаграмма в библиотеке FusionCharts имеет уникальный псевдоним. Вы можете найти псевдоним для диаграммы, которую хотите построить, на странице списка диаграмм FusionCharts.
id устанавливает уникальный идентификатор диаграммы, не путать с идентификатором элемента <div> , содержащего нашу диаграмму. id диаграммы используется для выбора диаграммы для применения обработчиков событий и методов вызова. Мы воспользуемся этим на шаге 5.
width и height задают размер диаграммы в пикселях или процентах. Ширина 100 % означает, что диаграмма занимает всю ширину контейнера.
Мы определяем формат данных, используя атрибут dataFormat . Мы используем JSON для нашего примера, но есть и другие приемлемые форматы данных, такие как URL-адрес XML. Чтобы узнать больше о форматах данных, обратитесь к странице официальной документации FusionCharts.
dataSource содержит фактическое содержимое диаграммы, а объект chart внутри него содержит параметры конфигурации диаграммы, такие как заголовок и подзаголовок. Массив data должен выглядеть знакомо, так как мы создали его на шаге 2 (он содержит данные для построения), а linkedData содержит содержимое дочерней диаграммы (диаграммы, которую вы получаете, щелкнув график данных на родительской диаграмме).

По теме: наймите лучших 3% внештатных архитекторов больших данных.

Шаг 4. Создание связанного массива данных для дочерних диаграмм

Теперь, когда мы определили родительскую диаграмму, пришло время создать дочернюю диаграмму для каждого графика данных — процесс, очень похожий на создание родительской диаграммы. Массив linkedData , созданный в методе 'insertFusionCharts', будет определять отдельный объект для каждой дочерней диаграммы. Вот как выглядят данные для первой дочерней диаграммы:

 "linkeddata": [{ "id": "q1", "linkedchart": { "chart": { "caption": "Monthly Revenue", "subcaption": "First Quarter", "paletteColors": "#EEDA54, #A2A5FC, #41CBE3", "labelFontSize": "16", // more configuration options }, "data": [{ "label": "Jan", "value": "255000" }, { "label": "Feb", "value": "467500" }, //more data] } }, //content for more child charts

id — это идентификатор отдельной дочерней диаграммы, которую мы определили на шаге 2. linkedChart аналогичен dataSource из шага 3 тем, что содержит фактическое содержимое этой диаграммы. Внутри объекта диаграммы находится множество других атрибутов, о которых я подробно расскажу в следующем разделе «Улучшение дизайна с помощью атрибутов диаграммы».

Шаг 5: Пользовательская конфигурация детализации

Различные типы диаграмм

Пока в нашем примере кода и родительская, и дочерняя диаграммы имеют один и тот же тип диаграммы. Если вы хотите перейти к другому типу диаграммы (например, от столбца к круговой диаграмме), вы делаете это, связывая событие fusionchartsrendered .

 $('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

В приведенном выше коде событие fusionchartsrendered вызовет метод configureLink , который определяет тип всех дочерних диаграмм, а также любые параметры кнопок наложения. Вы также можете указать отдельные типы диаграмм для каждой дочерней диаграммы. В методе configureLink доступно множество параметров, поэтому вам может быть полезно ознакомиться с справочной документацией по его API из FusionCharts.

Отображение диаграмм в разных разделах

Еще одна интересная вещь, которую вы можете сделать, — отобразить дочернюю диаграмму в другом контейнере, а не в том же, что и ее родитель. Для этого определите отдельный контейнер HTML <div> после контейнера родительской диаграммы и передайте его идентификатор в атрибут renderAt , как показано ниже:

 $('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", renderAt:"chart-container2", overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

Значение атрибута renderAt указывает идентификатор <div> , в котором будет отображаться дочерняя диаграмма ( chart-container2 ).

Улучшение дизайна с помощью атрибутов диаграммы

Следуя этому руководству, вы получите функциональную диаграмму, но она будет несколько уродливой, если вы оставите ее на этом. Для более привлекательного представления вам необходимо использовать косметические «атрибуты диаграммы». Атрибуты диаграммы определяются внутри объекта chart и используются для настройки параметров визуализации. Возможно, вам будет полезно обратиться к пояснительной графике FusionCharts при просмотре этих ключевых настраиваемых атрибутов:

paletteColors определяет цвет графиков данных. Если вы укажете здесь один цвет, все столбцы будут этого цвета. Если вы зададите несколько цветов, первый столбец получит первое значение, второй столбец примет второе значение и так далее.
plotSpacePercent управляет пространством между столбцами. Значение по умолчанию для этого — 20 (значение — целое число, но единица измерения — процент), а допустимый диапазон — 0–80. Нулевое значение заставит столбцы сгруппироваться и прилипнуть друг к другу.
baseFont определяет семейство шрифтов диаграммы. Вы можете использовать любой понравившийся вам шрифт; Я использовал Open Sans от Google в своей диаграмме. Просто включите файл внешнего шрифта в свою HTML-страницу, чтобы использовать его в своей диаграмме.
plotToolText позволяет настраивать всплывающие подсказки. Используя макросы, такие как $label и * $dataValue , вы можете отображать конкретную информацию о конкретном графике данных внутри <div> , а затем стилизовать этот <div> с помощью встроенного CSS. Вот что я сделал в нашем примере:

 "plotToolText": "<div>$label: $dataValue</div>"

theme позволяет вам определить атрибуты диаграммы в другом файле и применить их один раз здесь, вместо того, чтобы загромождать объект диаграммы многочисленными атрибутами диаграммы. Вы можете найти файл темы для этого руководства — toptal.js — в папке JS репозитория проекта на GitHub.

Это все, что я собираюсь рассказать, но для диаграммы существует более сотни атрибутов, поэтому, если вы хотите узнать больше, посетите страницу атрибутов диаграммы FusionCharts и найдите свой тип диаграммы.

Дополнительные ресурсы FusionCharts и jQuery

Хотя я рассмотрел наиболее важные элементы создания детализированной диаграммы с помощью jQuery, вполне вероятно, что вам понадобится помощь, когда вы попытаетесь сделать это самостоятельно. На данный момент вот несколько дополнительных ресурсов:

Плагин jQuery charts: для вдохновения посетите официальную страницу плагина jQuery charts, чтобы увидеть несколько живых примеров.
Документация: если вы не можете в чем-то разобраться, первое место, куда вы должны обратиться, — это документация. Вот удобные ссылки на плагин jQuery и детализированную диаграмму (также известную как связанная диаграмма).
Демонстрации: каждая библиотека графиков предлагает живые образцы для демонстрации своих возможностей, и FusionCharts не исключение. Перейдите к его демонстрационной галерее из более чем 800 живых образцов с полным исходным кодом, если вам нужны идеи. Есть хороший шанс, что все, что вы пытаетесь сделать, уже доступно. Не нужно начинать с нуля; просто разветвите скрипку и продолжайте оттуда!
Дополнительные расширения: если вы не используете ванильный JavaScript или jQuery, вы можете изучить дополнительные плагины и оболочки, предлагаемые FusionCharts, на этой странице. У них есть специальные плагины для различных библиотек и фреймворков, таких как Angular, React, Java, ASP.NET и т. д.

PS: я буду тусоваться в разделе комментариев ниже, поэтому не стесняйтесь задавать любые вопросы, которые могут у вас возникнуть по поводу моей статьи. Я рад помочь!

Связанный: Интеллектуальный анализ данных для прогнозного анализа социальных сетей