NVD3.js — это библиотека визуализации JavaScript, которая является бесплатной для использования и с открытым исходным кодом. Он получен из хорошо известной библиотеки визуализации d3.js. При правильном использовании эта библиотека может быть чрезвычайно эффективной для повседневных задач и даже для бизнес-операций.
Например, онлайн-панель. Мы можем использовать NVD3.js для компиляции данных в централизованное пространство, которое визуализирует информацию в аккуратных диаграммах и графиках. Вот о чем мы будем смотреть в этом посте.
Создание панели мониторинга с NVD3.js в первый раз является сложной задачей, но после этого урока вы должны обладать необходимыми знаниями, чтобы ваши руки были грязными и начали создавать что-то удивительное. Лично у меня есть страсть к визуализации в Интернете. В то же время они оба красивы и значимы.
Реальный случай использования: панель данных данных
Панели инструментов можно использовать практически для чего угодно. Пока у вас есть данные для анализа, вам хорошо идти, будь то некоторые данные о продажах или средняя погода за последние 20 лет. Давайте построим что-то вроде этого:
См. Панель приборов NVD3.JS от Danny Englishby (@DanEnglishby) на CodePen.
Настройка среды
Чтобы настроить диаграмму NVD3, нам нужны три вещи:
Библиотека JavaScript NVD3
Библиотека NVD3 CSS
Библиотека D3.js (зависимость от NVD3)
Все они доступны через сеть CDN Cloudflare. Вот HTML-шаблон со всеми этими ресурсами, готовыми к работе:
Создание приборной панели
Источники данных
Для этого урока я подумал, что использовать некоторые сырые фактические данные, которые уже были отформатированы в JSON, было бы проще всего. Я использую два источника информации: один о глобальных средних температурах с течением времени и о другой статистике демографической статистики в мире. Я уже отформатировал данные в JSON, поэтому он готов скопировать и вставить!
Создание линейной диаграммы
Давайте продолжим и создадим линейную диаграмму с некоторыми глобальными данными о температуре. Исходные данные, которые я собрал в JSON, представляют последние двадцать лет температурных изменений по сравнению с глобальным средним показателем.
Во-первых, мы добавим элемент-заполнитель для прикрепленной диаграммы, когда выполняется JavaScript.
Затем добавьте следующий JSON в некоторые теги скриптов перед тегом
Значение x — это год, а значение y — это температура в градусах Цельсия.
Последний фрагмент головоломки — самая важная функция, которая создает диаграмму. Функция, названная nv.addGraph () является основной функцией, используемой во всем NVD3, и внутри нее вы инициализируете объект диаграммы. В этом примере мы используем объект lineChart который может иметь приемы, привязанные к нему, в зависимости от визуальных требований.
Ознакомьтесь с комментариями JavaScript, чтобы увидеть, что делает каждая строка.
nv.addGraph (function () {
var chart = nv.models.lineChart () // Инициализировать объект lineChart.
.useInteractiveGuideline (истина); // Включить интерактивную подсказку (подсказки)
chart.xAxis
.axisLabel ('TimeStamp (Year)'); // Установите метку xAxis (Вертикальный)
chart.yAxis
.axisLabel ('Degrees (c)') // Установите метку xAxis (Horizontal)
.tickFormat (d3.format ( '02F')); // Формат округленных чисел.
d3.select ('# averageDegreesLineChart svg') // Выберите идентификатор элемента html, который мы определили ранее.
.datum (температураIndexJSON) // Передача в JSON
.transition (). duration (500) // Установить скорость перехода
.call (график); // Вызов и визуализация диаграммы
nv.utils.windowResize (chart.update); // Intitiate listener для изменения размера окна, поэтому диаграмма отвечает и меняет ширину.
вернуть;
});
См. Диаграмму Pen Line NVD3.JS от Danny Englishby (@DanEnglishby) на CodePen.
Создание двух гистограмм по цене одного
Вам понравится минимальное усилие этих следующих двух графиков. Мощность NVD3.js позволяет переключаться между типами диаграмм. Вы можете активировать переключатель, чтобы пользователи могли переключаться между стандартной гистограммой или сложной гистограммой. Или вы можете заставить тип диаграммы и сделать ее неизменной.
Следующие примеры показывают, как это сделать.
Штабелированная многошарнирная диаграмма
Вы знаете эти гистограммы, которые складывают два значения вместе в одном баре? Вот что мы здесь делаем.
var populationBySexAndCountryJSON = [{"key":"Male","color":"#d62728","values":[{"label":"China","value":717723466.166},{"label":"India","value":647356171.132},{"label":"United States of America","value":157464952.272},{"label":"Indonesia","value":125682412.393},{"label":"Brazil","value":98578067.1},{"label":"Pakistan","value":93621293.316},{"label":"Nigeria","value":88370210.605},{"label":"Bangladesh","value":79237050.772},{"label":"Russian Federation","value":65846330.629},{"label":"Japan","value":61918921.999}]}, {"key": "Female", "color": "# 1f77b4", "values": [{"label":"China","value":667843070.834},{"label":"India","value":604783424.868},{"label":"United States of America","value":162585763.728},{"label":"Indonesia","value":124183218.607},{"label":"Brazil","value":101783857.9},{"label":"Pakistan","value":88521300.684},{"label":"Nigeria","value":85245134.395},{"label":"Bangladesh","value":77357911.228},{"label":"Russian Federation","value":76987358.371},{"label":"Japan","value":65224655.001}]}];
nv.addGraph (функция ()
{
var chart = nv.models.multiBarChart ()
.x (функция (d) {
return d.label; // Настройте ось x, чтобы использовать «метку» внутри json.
})
.y (функция (d) {
return d.value; // Настройте ось y, чтобы использовать «значение» в json.
}). margin ({top: 30, right: 20, bottom: 50, left: 85}) // Добавляем CSS-маржу в таблицу.
.showControls (false) // Поворот переключаемого элемента управления
.stacked (истина); // Силовой режим.
chart.xAxis.axisLabel ( 'Страна'); // добавление метки к горизонтальной оси
chart.yAxis.tickFormat (d3.format ( '0f')); // Обозначим значения yAxis
d3.select ('# worldPopulationMultiBar svg') // Выберите элемент html по идентификатору
.datum (populationBySexAndCountryJSON) // Передача данных
.transition (). duration (500) // Установить скорость перехода
.call (график); // Call & Render chart
nv.utils.windowResize (chart.update); // Intitiate listener для изменения размера окна, поэтому диаграмма отвечает и меняет ширину.
вернуть;
});
Двумя важными настройками в JavaScript здесь являются .showControls и .stacked booleans. Они оба делают то, что говорят на олове: заставляют график группировать гистограмму и не позволяют переключать тип диаграммы. Вы увидите, что я имею в виду, скоро переключившись.
См. Pen Multi StackedBar NVD3.JS от Danny Englishby (@DanEnglishby) на CodePen.
Стандартная многошарнирная диаграмма
Теперь давайте сделаем что-то более традиционное и сравниваем значения бок о бок, а не складываем их в один и тот же бар.
Это использует почти тот же код, что и сложеные примеры, но мы можем изменить логическое значение .stacked на false . Это, конечно же, сделает штатную гистограмму обычной гистограммой.
var populationBySexAndCountryJSON = [{"key":"Male","color":"#d62728","values":[{"label":"China","value":717723466.166},{"label":"India","value":647356171.132},{"label":"United States of America","value":157464952.272},{"label":"Indonesia","value":125682412.393},{"label":"Brazil","value":98578067.1},{"label":"Pakistan","value":93621293.316},{"label":"Nigeria","value":88370210.605},{"label":"Bangladesh","value":79237050.772},{"label":"Russian Federation","value":65846330.629},{"label":"Japan","value":61918921.999}]}, {"key": "Female", "color": "# 1f77b4", "values": [{"label":"China","value":667843070.834},{"label":"India","value":604783424.868},{"label":"United States of America","value":162585763.728},{"label":"Indonesia","value":124183218.607},{"label":"Brazil","value":101783857.9},{"label":"Pakistan","value":88521300.684},{"label":"Nigeria","value":85245134.395},{"label":"Bangladesh","value":77357911.228},{"label":"Russian Federation","value":76987358.371},{"label":"Japan","value":65224655.001}]}];
nv.addGraph (function () {
var chart = nv.models.multiBarChart ()
.x (функция (d) {
return d.label; // Настройте ось x, чтобы использовать «метку» внутри json.
})
.y (функция (d) {
return d.value; // Настройте ось y, чтобы использовать «значение» в json.
}). margin ({top: 30, right: 20, bottom: 50, left: 85}) // Добавляем CSS-маржу в таблицу.
.showControls (false) // Поворот переключаемого элемента управления
.stacked (ложь); // *** Принудительный режим нормальной строки. ***
chart.xAxis.axisLabel ( 'Страна'); // добавление метки к горизонтальной оси
chart.yAxis.tickFormat (d3.format ( '0f')); // Обозначим значения yAxis
d3.select ('# worldPopulationMultiBar svg') // Выберите элемент html по идентификатору
.datum (populationBySexAndCountryJSON) // Передача данных
.transition (). duration (500) // Установить скорость перехода
.call (график); // Call & Render chart
nv.utils.windowResize (chart.update); // Intitiate listener для изменения размера окна, поэтому диаграмма отвечает и меняет ширину.
вернуть;
});
Одно изменение настроек дает нам совершенно новый график.
См. Pen Multi Bar NVD3.JS от Danny Englishby (@DanEnglishby) на CodePen.
Используя один набор кодов с минимальными изменениями, вы просто создали две эпические карты по цене одного. Престижность для вас!
Конечно, есть одна последняя настройка, если вам нужна функциональность переключения диаграмм. Измените .showControls на true и удалите опцию .stacked . Вы увидите некоторые элементы управления в верхней части диаграммы. Нажатие на них переключит представление между штабельной и стандартной диаграммой.
См. Pen Multi Bar Switchable NVD3.JS от Danny Englishby (@DanEnglishby) на CodePen.
Создание приборной панели
Мне ничто не нравится, когда я смотрю больше в мире веб-разработки, чем на панели мониторинга. Они никогда не стареют и выглядят великолепно. Используя методы построения диаграмм, которые мы уже рассмотрели, мы можем сделать нашу собственную отзывчивую панель инструментов на одной веб-странице.
Если вы помните в предыдущих фрагментах JavaScript, была установлена функция с прослушивателем по каждому графику: nv.utils.windowResize (chart.update);
Эта магическая функция изменяет размер диаграммы для вас, как если бы она была установлена на ширина: 100% в CSS. Но это не просто сокращается но также перемещает и реструктурирует график в соответствии с размером экрана. Это очень здорово! Все, о чем мы должны беспокоиться, это высоты. Мы можем установить это, применив flexbox к классам, назначенным элементам диаграммы.
Давайте объединим все, что у нас есть, до одной панели, обернув каждый элемент диаграммы в контейнер flexbox. Примените небольшое количество CSS для сгибания и высоты и, наконец, скомпилируйте все сценарии в один (или вы можете сохранить их отдельно в своем собственном проекте).
См. Панель приборов NVD3.JS от Danny Englishby (@DanEnglishby) на CodePen.
Резюме
Этот учебник, надеюсь, даст вам знания, чтобы начать работу с визуализацией данных и, в конечном счете, добавить их в производственную панель. Даже если вы хотите играть только с этими концепциями, я уверен, что ваш ум начнет работать с идеями о том, как преобразовать различные типы данных в потрясающие визуальные эффекты.
Загрузка...
