Введение в Chart.js 2.0 — шесть простых примеров
Эта статья включена в нашу антологию, современный JavaScript . Если вы хотите, чтобы все в одном месте было в курсе современного JavaScript, зарегистрируйтесь в SitePoint Premium и загрузите себе копию.
Эта статья была рецензирована Тимом Севериеном и Саймоном Кодрингтоном . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!
Если ваш сайт интенсивно использует данные, вам нужно будет найти способ сделать эти данные простыми для визуализации. В конце концов, люди не очень хорошо понимают длинные списки необработанных чисел. Вот где появляются диаграммы и графики — они могут сделать сложные статистические отношения очевидными и интуитивно понятными, а также сделать их более доступными для не говорящих по-английски. Все понимают основные графики с одинаковой скоростью, чего нельзя сказать о пунктах, изобилующих техническим жаргоном. Использование диаграмм, когда это выгодно, сделает ваш сайт более понятным и визуально более привлекательным.
В этой статье я познакомлю вас с библиотекой JavaScript-диаграмм под названием Chart.js . На шести стильных примерах я продемонстрирую, как вы можете использовать Chart.js для визуализации данных на вашем веб-сайте, а также для настройки их в соответствии с вашими потребностями.
Почему Chart.js?
Я выбрал Chart.js, потому что его можно быстро выучить и использовать. Он разработан с учетом простоты, но в то же время чрезвычайно настраиваемый. По моему опыту, библиотеки диаграмм попадают в спектр сложности, где более сложные библиотеки предлагают более глубокую настройку, но имеют более крутые кривые обучения. Chart.js — одна из самых быстрых и простых в освоении библиотек, которая не сильно ограничивает ваши возможности. Он поставляется с восемью различными типами диаграмм, которые покроют практически все ваши потребности в визуализации данных.
Сообщество открытого кода активно поддерживает Chart.js на высоком уровне. Недавно он достиг версии 2.0, в которую было внесено несколько фундаментальных изменений синтаксиса, чтобы сделать код более согласованным, а также предложить мобильную поддержку. В этой статье я собираюсь использовать Chart.js 2.0 и его обновленный синтаксис. В конце этой статьи, после того как вы дадите вам шанс увидеть, как работает Chart.js 2.0, есть раздел, в котором описывается переход 1.0 -> 2.0 и что следует ожидать при чтении старых примеров Chart.js в Интернете.
Установка Chart.js
Опять же, Chart.js ориентирован на простоту. Легко учиться, легко использовать и легко установить. Если вы хотите погрузиться в реальный код, ознакомьтесь с проектом GitHub .
Вам нужно только две вещи, чтобы использовать Chart.js.
1) Библиотека — для этого руководства я рекомендую использовать CDN, потому что это самый простой способ быстро начать работу.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> 2) Элемент <canvas> , так как Chart.js использует холст HTML5.
</canvas><canvas></canvas>
Кроме того, вы можете использовать менеджер пакетов для загрузки библиотеки. Для получения дополнительной информации см. Руководство по началу работы .
Просто, а? Теперь без лишних слов, давайте посмотрим, что может предложить Chart.js.
Линия Диаграмма
Это все, что вам нужно для создания минимальной линейной диаграммы в Chart.js. Просто поместите его в <script></script> где-нибудь в вашем <body> после того, как вы объявите холст HTML5.
var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], datasets: [{ label: 'apples', data: [12, 19, 3, 17, 6, 3, 7], backgroundColor: "rgba(153,255,51,0.4)" }, { label: 'oranges', data: [2, 29, 5, 5, 2, 3, 10], backgroundColor: "rgba(255,153,0,0.4)" }] } });
Если этот код выглядит интенсивно, не волнуйтесь! Все примеры Chart.js по большей части следуют указанному выше формату, так что вы должны изучить его только один раз. Пройдемся строка за строкой, чтобы понять, что происходит.
var ctx = document.getElementById("myChart").getContext('2d'); Эта строка получает ссылку на элемент <canvas> мы создали ранее, а затем вызывает метод getContext возвращает объект, который предоставляет методы и свойства для рисования на холсте. Мы храним это в переменной с именем ctx .
var myChart = new Chart(ctx, { type: 'line', data: Здесь мы создаем объект диаграммы. Я на мгновение исключил данные, чтобы сосредоточиться на свойстве type , которое определяет желаемый тип диаграммы. new Chart() конструктор Chart.js new Chart() принимает два параметра:
- Либо ссылка на элемент
</canvas><canvas>, на котором будет отображаться диаграмма, либо ссылка на его 2D-контекст рисования (здесь мы используем 2D-контекст). Независимо от того, что вы используете, соглашение Chart.js должно называть его - Литерал объекта, содержащий данные и параметры конфигурации, которые Chart.js будет использовать для построения диаграммы. Обязательными свойствами являются
typeиdata. В нашем примереtypeявляется «линия», потому что нам нужен линейный график.data— это данные, которые вы использовали для заполнения диаграммы.
Chart.js использует расположение массива для определения положения на графике, поэтому первая точка «яблок» будет иметь значение «12», вторая — «19» и т. Д. Добавление новых строк так же просто, как добавление нового объекта с data .
Наконец, я установил цвет фона rgba для каждого набора данных, чтобы сделать его более привлекательным.
Чтобы узнать больше о линейных графиках с Chart.js, ознакомьтесь с документами
Профессиональный совет: щелкнув любую из легенд для диаграмм («Яблоки» и «Апельсины» здесь), вы переключите этот конкретный набор данных. Это работает для всех типов диаграмм.
Гистограмма
Гистограммы (в основном) — это просто линейные графики, которые выглядят немного иначе. Изменяя одну строку нашего предыдущего примера, мы можем создать гистограмму.
type: 'line'
чтобы:
type: 'bar' Да, это действительно так просто.
Полную документацию по гистограммам можно найти здесь .
Вот полный код для этого примера:
var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["M", "T", "W", "R", "F", "S", "S"], datasets: [{ label: 'apples', data: [12, 19, 3, 17, 28, 24, 7] }, { label: 'oranges', data: [30, 29, 5, 5, 20, 3, 10] }] } }); Радарные карты
Радарные диаграммы — мой любимый тип, и опять же они принадлежат к тому же семейству, что и линейные и гистограммы. Радарные диаграммы — это просто линейные диаграммы с радиальной осью X, противоположной прямой линии. Чтобы получить быструю радиолокационную карту, измените:
type: 'bar' чтобы:
type: 'radar' Потому что именно так Chart.js катится .
К сожалению, результат немного уродливый и очень трудно читать. Гистограммы не имеют перекрытия, поэтому сплошные цвета выгодны. Это не относится к радиолокационным картам, которые используют перекрытие. Мы можем приспособиться к этому, обновив значение opactity нашего backgroundColor и добавив borderColor .
{ label: 'apples', backgroundColor: "rgba(179,11,198,.2)", borderColor: "rgba(179,11,198,1)", data: [12, 19, 3, 17, 6, 3, 7] }
Это добавляет прозрачный фон и позволяет нам визуализировать перекрытие.
Чтобы узнать больше о радиолокационных картах, ознакомьтесь с документами .
Вот полный код из этого примера:
var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'radar', data: { labels: ["M", "T", "W", "T", "F", "S", "S"], datasets: [{ label: 'apples', backgroundColor: "rgba(153,255,51,0.4)", borderColor: "rgba(153,255,51,1)", data: [12, 19, 3, 17, 28, 24, 7] }, { label: 'oranges', backgroundColor: "rgba(255,153,0,0.4)", borderColor: "rgba(255,153,0,1)", data: [30, 29, 5, 5, 20, 3, 10] }] } }); Полярные карты
apples .Как обычно, указание, что это полярная диаграмма, можно сделать одной строкой. Изменить:
type: 'radar' чтобы:
type: 'polarArea' Но полярная область — это первая диаграмма, которую я охватил, которую нельзя использовать для сравнения двух наборов данных. В предыдущих примерах использовались разные способы сопоставления двух массивов одинаковой длины, тогда как полярная диаграмма (и круговая диаграмма, которая будет рассмотрена далее) отображает только одну группу чисел.
Вот полный код для этого примера:
var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'polarArea', data: { labels: ["M", "T", "W", "T", "F", "S", "S"], datasets: [{ backgroundColor: [ "#2ecc71", "#3498db", "#95a5a6", "#9b59b6", "#f1c40f", "#e74c3c", "#34495e" ], data: [12, 19, 3, 17, 28, 24, 7] }] } }); Единственный новый код — это массив backgroundColor . Каждый цвет соответствует элементу data того же индекса.
Чтобы узнать больше о диаграммах полярных областей, ознакомьтесь с документами .
Круговые и кольцевые диаграммы
Вы, наверное, уже можете догадаться об этой части Изменить:
type: 'polarArea' чтобы:
type: 'pie' Свойство type является ключом к Chart.js. Помните, как легко было переходить с линейного графика на гистограмму и радар? Ну, полярные, круговые и кольцевые диаграммы одинаково взаимозаменяемы. С этим единственным изменением мы можем перейти от полярной диаграммы к круговой диаграмме.
И для диаграммы пончик:
type: 'pie' чтобы:
type: 'doughnut' Чтобы узнать больше о круговых и кольцевых диаграммах, ознакомьтесь с документами .
Вот полный код для круговой диаграммы:
var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: ["M", "T", "W", "T", "F", "S", "S"], datasets: [{ backgroundColor: [ "#2ecc71", "#3498db", "#95a5a6", "#9b59b6", "#f1c40f", "#e74c3c", "#34495e" ], data: [12, 19, 3, 17, 28, 24, 7] }] } }); Кольцевые диаграммы имеют интересное свойство, называемое cutoutPercentage которое определяет cutoutPercentage центрального отверстия. Чтобы углубиться в это, мне сначала нужно показать вам кое-что о Chart.js, который я проигнорировал, чтобы помочь вам ускорить основные типы диаграмм.
Конфигурирование Chart.js
До сих пор в каждом примере мы использовали формат:
var myChart = new Chart(ctx, { type: Но есть третье свойство, называемое options . Это вписывается прямо под data .
var myChart = new Chart(ctx, { type: Теперь, когда вы знакомы с основами Chart.js, пришло время рассказать о некоторых хитростях, options .
Титулы
Легко добавить заголовок к любой диаграмме Chart.js, добавив этот набор параметров. Собственные названия потрясающие, но стоит отметить, что они в основном статичны и неизменны. Это будет иметь значение, когда мы попытаемся добавить пользовательские события через минуту.
options: { title: { display: true, text: 'Custom Chart Title' } } Дырка от бублика
Свойство cutoutPercentage имеет значение от 0 до 50. Круговые диаграммы — это просто cutoutPercentage диаграммы с cutoutPercentage 0.
options: { cutoutPercentage: 10, } Составление гистограмм
Если вы хотите, чтобы ваши гистограммы были сложены, просто добавьте следующий набор параметров в код гистограммы:
options: { scales: { yAxes: [{ stacked: true }] } } У каждого типа диаграммы есть много вариантов, которые вы можете просмотреть. Я призываю вас сделать это.
Обработка событий
Как упоминалось ранее, нажатие на легенду переключит набор данных, связанный с этой конкретной легендой. Давайте дополним это нашей собственной функциональностью:
var original = Chart.defaults.global.legend.onClick; Chart.defaults.global.legend.onClick = function(e, legendItem) { Этот код сохраняет ссылку на onClick элемента легенды в переменную с именем original . Затем он перезаписывает эту функцию нашей собственной настроенной версией. Параметр e который мы передаем ему, является ссылкой на событие click, вызвавшее срабатывание функции, а параметр legendItem является ссылкой на легенду, по которой был выполнен щелчок. Как только мы закончили добавление нашего собственного кода, мы вызываем исходную функцию, определяющую значение this и передавая ожидаемые параметры. Это приводит к выполнению действия по умолчанию для нажатия на легенду (переключение набора данных).
Другими словами, теперь мы можем упаковать любую желаемую функциональность поверх вызова onClick() если мы поместим его выше original.call() .
Конкретный пример
Давайте дополним наш предыдущий код, чтобы при нажатии на легенду подпись внизу диаграммы автоматически обновлялась.
Мы только меняем заголовок, но вы можете добавить любую функциональность, какую захотите. Например, на панели инструментов могут быть столбцы ежедневных значений apples и oranges . Панель инструментов также может динамически обновляться в зависимости от состояния вашей диаграммы с помощью настраиваемого обратного вызова. Создание интерактивных данных легко с Chart.js.
Вот код
var labels = { "apples": true, "oranges": true }; var caption = document.getElementById("caption"); var update_caption = function(legend) { labels[legend.text] = legend.hidden; var selected = Object.keys(labels).filter(function(key) { return labels[key]; }); var text = selected.length ? selected.join(" & ") : "nothing"; caption.innerHTML = "The above chart displays " + text; }; Как видите, мы используем объектный литерал, чтобы отслеживать статус легенд. Мы также используем свойства legend.text и legend.hidden для обновления своего состояния. Функция фильтра возвратит любой из ключей объекта, значение которого равно true которое мы используем для создания заголовка.
Chart.js 2.0 против 1.0
В этой статье использовался синтаксис Chart.js 2.0. Chart.js 2.0 является относительно новым для 2016 года. Самая очевидная разница между 2.0 и 1.0 заключается в том, как объявлять графики.
1,0
var LineChartDemo = new Chart(ctx).Line( 2,0
var myChart = new Chart(ctx, { type: 'line', data: Версия 1.0 фокусируется на использовании цепочки функций для создания определенного типа диаграммы, а затем на передаче данных и параметров. Версия 2.0 переключает это, позволяя пользователю создать общий объект диаграммы, а затем передать тип, а также данные и параметры. Второй подход больше соответствует философии Chart.js, будучи максимально модульным и индивидуальным. Стоит отметить, что Chart.js 2.0 обратно совместим и все еще поддерживает синтаксис 1.0.
Еще одна ключевая особенность Chart.js 2.0 — поддержка мобильных устройств. Диаграммы теперь можно масштабировать, чтобы соответствовать экранам мобильных устройств и обрабатывать сенсорные события в мобильных браузерах. В связи с текущим распространением мобильных устройств, это обязательная функция для веб-сайтов в 2016 году.
Еще одна новинка 2.0, которую мы использовали в этом руководстве — это title . Диаграммы теперь имеют встроенные заголовки, которые будут взаимодействовать с диаграммой, к которой они прикреплены.
Полный список обновлений можно найти в заметках о выпуске 2.0.0 .
Вывод
Chart.js идеально подходит для быстрого создания прототипов простых диаграмм. Существует восемь основных типов диаграмм, которые мы рассмотрели: line , polarArea , radar , polarArea , pie и doughnut . Эти разнообразные диаграммы охватывают наиболее распространенные способы визуализации данных. Это означает, что Chart.js, вероятно, является единственной графической библиотекой, которая понадобится вам для вашего следующего проекта.
Если вы хотите узнать больше о Chart.js, я настоятельно рекомендую документы, которые вы можете найти на веб-сайте Chart.js . Если у вас есть какие-либо вопросы или комментарии, я хотел бы услышать их ниже.
Визуализация данных для вашего Web-проекта
Статья для тех, кто раньше не использовал графики в веб, но собирается. Также для тех, кто хочет глубже познакомиться с этой темой.
Цель — осветить предметную область и упростить проблему выбора конкретного решения. Рассмотрим отличия библиотек и остановим взгляд на популярных вариантах, будут примеры и совсем немного теории.
Для лучшего понимания — необходимо знание JavaScript и общее представление о работе веб.
Конечно, у визуализации данных есть своя история (в статье мы этого касаться не будем), если интересно — можно ознакомиться, например, здесь.
Моя статья, вероятно, не всеобъемлющая, поэтому пишите комментарии и личные сообщения, я готов выслушать критику и дополнить материал.
Итак, поехали!
Допустим, у вас есть сайт…
… который вы захотели раскрасить с помощью визуализации данных.
Это могут быть как простейшие графики, так и совсем нетривиальные. Статические или интерактивные. Несколько отрисованных элементов или несколько десятков тысяч. Какое решение подходит для конкретного случая — вот задача, которую необходимо решить.
Проекты, где можно использовать графики — разные. Это могут быть простые сайты-визитки, сделанные на WordPress за один день, или огромные индустриальные монстры, которые разрабатываются большими командами множество лет. Конечно, подходы к разработке и выбору решения в этих случаях будут различаться.
Возьмем, к примеру, визуализацию спроса на авиабилеты внутри США в День Благодарения, которую «Нью-Йорк таймс» представила в 2015 году. То, как реализовать подобную визуализацию, сразу не очевидно.
Как вы станете решать задачу, не зная предметной области? Скорее всего выберете один из вариантов:
- Взять «помощь друга»;
- Загуглить, изучить вопрос самостоятельно и выбрать нужный инструмент.
Друга с релевантным опытом может и не быть, а процесс самостоятельного поиска может затянуться надолго, нам — программистам — свойственно копаться в деталях, а это отнимает время. Давайте представим, что мы с вами друзья. А я как раз изучал эту область. Вот я и попробую поделиться опытом и сэкономлю драгоценное время.
Итак, задача — визуализировать данные на сайте. Рассмотрим более детально задачу и из каких решений мы можем выбирать?
Технологическое разнообразие
Технически, мы можем реализовать представление данных на странице разными способами:
- HTML — почему бы и нет? Мы ведь можем нарисовать простейший bar-chart с помощью HTML-тегов и CSS.
- SVG — векторная графика, она гарантирует четкое изображение вне зависимости от масштаба. Синтаксис у него XML-подобный. Правда, если для сложной визуализации понадобится несколько десятков тысяч точек, это может заметно влиять на производительность.
- Canvas — здесь мы можем нарисовать практически все, что угодно. Для этого нам нужно создать элемент на странице и обращаясь к нему через API. Нарисовать что-то, добавить цвет, фон, текст и т. д. С помощью Canvas обычно визуализируют большие объемы данных.
- WebGL — позволяет рисовать трехмерную графику.
- VML — устаревшая технология от Microsoft, XML-подобная. Подойдет тем, кому нужно обеспечить нормальную работу сайта в браузере Internet Explorer более старых версий, чем десятая.
Конечно, все перечисленные варианты можно комбинировать. Можно, например, реализовать динамическое переключение от SVG на Canvas в зависимости от объема отображаемых данных.
Функциональное разнообразие
Графики могут:
- быть разных типов:
линейный, столбчатый, древовидный и т. д. Картинки взяты отсюда. - быть адаптивными:
реагировать на изменение размера страницы.
Картинка взята отсюда. - быть анимированными:
например, допускать появление и удаление элементов. Пример взят здесь. - быть открытыми или закрытыми для кастомизации:
скажем, известную библиотеку D3 можно очень тонко настроить под свои нужды, в отличие от многих других библиотек. - быть стабильными или нет:
например, при загрузке данных значение какого-то параметра равного null/undefined может привести к полной неотрисовке графика. - быть кроссбраузерными или нет:
будет ли график работать в мобильной Opera? - поддерживать экспорт (сохранение) графика в картинку.
- поддерживать интеграцию с фреймворками:
сейчас трудно себе представить крупное приложение на чистом JS без Angular/React/тому подобное. - поддерживать сохранение/загрузку состояния:
например, сохранить состояние когда скрыта какая-нибудь серия точек на линейном графике.
Конечно, это не полный список и его можно детализировать глубже. Но мне кажется, основные характеристики я назвал.
Посмотрим на не-технические характеристики
Вот они:
- Сообщество. Например, у Google Charts или D3 большие и активные комьюнити, где можно получить ответы на многие вопросы. Если вы выбрали малоизвестную библиотеку, то придется самому лезть в код и со всем этим разбираться.
- Поддержка. Понятие применимо скорее к платным решениям. На ваши вопросы ответят разработчики.
- Лицензия. Доступна ли библиотека для коммерческого использования? Например, Google Charts разрешают использовать свою библиотеку бесплатно, но библиотека должна быть загружена с серверов Google.
- Актуальность. Из всего многообразия библиотек добрая половина потенциально подходящих уже не поддерживается и забыта.
Теперь перейдем к практике и рассмотрим реальные продукты, которые есть на рынке.
Решения, популярные в 2018 году
Платные решения
Это далеко не полный список, однако стоит перечислить ряд популярных библиотек:
- Fusioncharts by FusionCharts team, India, 2002.
- Anychart by AnyChart team, United States, 2003.
- Amcharts by amCharts team, Lithuania, 2004.
- Highcharts by Highsoft team, Norway, 2009.
- Zingchart by ZingChart team, USA, 2009.
Не будем детально останавливаться на платных решения. Скажу только, что с высокой долей вероятности, среди них найдется то, что нужно именно в вашем случае. Однако за это придется заплатить круглую сумму.
Бесплатные решения
Google Charts by Google, USA, 2007.
- Продукт предлагает огромный выбор: от простейших линейных до сложных комбинированных, многоуровневых графиков. Есть множество готовых примеров. Фичи легко применить, например, графики можно эмбеддить или экспортировать в виде картинок. Библиотека совместима с разными браузерами и платформами, работает на iOS и Android, поддерживает старые версии IE и не требует установки плагинов. Использует HTML, SVG, VML для визуальной отрисовки. Есть минус — согласно лицензии, вы не можете использовать файлы библиотеки локально.
- Продукт бесплатный, но не опенсорс. Вы обязаны подгружать исходный код библиотеки с серверов Google.
- Пример простейшего графика
- Примеры
D3.js by Mike Bostock, USA, 2011.
- Библиотека претендует на воплощение некого data-driven подхода. В отличие от многих других, позволяет отобразить данные именно так, как вы хотите. Это происходит за счет гибкого API, к которому нужно привыкнуть. Функционал библиотеки позволяет кастомизировать любые графики и предоставляет более широкие возможности, чем Google Charts (в последней представлены наиболее распространенные варианты графиков). Для отображения можно использовать любой вариант: html, svg, canvas, webgl, …
- Лицензия: BSD-3
- Пример простейшего графика
- Примеры
Echarts by Chinese Baidu, China, 2013.
- Бесплатная библиотека для визуализации данных от наших друзей из Китая. Она действительно достойна внимания, предоставляет набор из готовых, достаточно хорошо кастомизируемых стандартных графиков и их комбинаций. Отмечу приятный UI и интерактивность из коробки. Библиотека хорошо работает с большими объемами данных и включает много примеров, в том числе 3D-графиков. Написана на чистом JS, использует библиотеку zrender в качестве движка для отрисовки Canvas. Из минусов — не все описание есть на английском и англоязычное комьюнити небольшое.
- Лицензия: BSD
- Пример простейшего графика
- Примеры
Chart.js by open-source contributors, Worldwide, 2013.
- Библиотека предлагает воспользоваться базовым набором графиков нескольких типов (8 на момент написания статьи). Использует Canvas для отрисовки графики. Очень приятная ламповая библиотека для быстрого старта. Отмечу UI и красивый дизайн, а также легкость освоения.
- Лицензия: MIT
- Пример простейшего графика
- Примеры
Chartist by an individual developer Gion Kunz, Switzerland, 2014.
- Предлагает красивые респонсив-чарты, немного кастомизации и быстрый старт. Из минусов — всего три типа чартов (на момент написания статьи), плюс их некоторые комбинации. Использует SVG для отрисовки графики. Еще одна теплая, ламповая библиотека со своей красотой, но достаточно узкой областью применения.
- Лицензия: MIT
- Пример простейшего графика
- Примеры
Plotly by Plotly team, Canada, 2015.
- В основе этой библиотеки лежит D3.js и stack.gl. Заметен высокоуровневый, декларативный подход. Предлагает 20 видов графиков (на момент написания статьи), в том числе трехмерные. D3js, которая лежит в основе, позволяет хорошо кастомизировать графики. Использует SVG, WebGL для отрисовки графики. Комбинация количества и качества графиков с MIT-лицензией может быть привлекательной для разработчиков крупных продуктов.
- Лицензия: MIT
- Пример простейшего графика
Я надеюсь, эти детали помогут определиться с решением, подходящим именно для вашей задачи. Напоследок несколько интересных примеров визуализаций для вдохновения.
Примеры
- Визуализация дорожного движения от Uber. Uber визуализирует большой объем данных о дорожном движении с помощью JavaScript и WebGL. Библиотеку для этого Uber разрабатывают сами, причем с MIT лицензией.
- Интерактивная инфографика: «Распорядок дня знаменитых творческих людей». Реализовано простой версткой на HTML + CSS.
- Занятия среднестатистического американца в течение дня. Данные получены на основе опроса, а их визуализацию сделана на D3, используется SVG.
Всем спасибо!
Часть 1 / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY
Автор: Елизавета Гуменюк Просто люблю писать, переводить и давать людям возможность читать интересный контент. И пусть я не всегда идеальна — есть к чему стремиться!!!Библиотеки и фреймворки JavaScript облегчают разработку веб-сайтов и приложений с помощью широкого спектра функций и возможностей — и все это благодаря динамичным, гибким и привлекательным свойствам JavaScript. Согласно опросу портала StackOverflow в 2020 году, JavaScript продолжает оставаться наиболее часто используемым языком программирования (уже 8-й год подряд) — его используют 67,7% респондентов.
Его универсальность способствует как бэк-энд, так и фронт-энд разработке, в дополнение к их тестированию. В результате вы можете найти множество библиотек JavaScript и фреймворков, которые служат различным целям. Следовательно, это может сбить с толку разработчиков при выборе подходящего варианта для проекта.
Но вы не волнуйтесь! В этой статье мы собрали в общей сложности 40 библиотек и фреймворков JavaScript, а также описали их функции, преимущества и варианты использования.
Что такое библиотеки JavaScript?
Библиотеки JavaScript содержат различные функции, методы или объекты для выполнения практических задач на веб-странице или в JS-приложении. Вы даже можете создать сайт WordPress с их помощью.
Подумайте о них как о традиционной книжной библиотеке, куда вы снова и снова возвращаетесь, чтобы прочитать свои любимые книги. Вы можете сами быть автором и наслаждаться книгами других авторов, получать новую точку зрения или идею, а затем использовать это в своей жизни.
Помимо прочего библиотека JavaScript имеет коды или функции, которые разработчики могут повторно использовать и перепрофилировать. Один разработчик пишет эти коды, а другие повторно используют тот же код для выполнения определенной задачи, например, подготовки слайд-шоу, вместо того чтобы писать его с нуля. Это значительно экономит им время и силы.
Именно они являются мотивом создания библиотек JavaScript, поэтому вы можете найти десятки таких ресурсов для нескольких вариантов использования. Библиотеки не только экономят ваше время, но и упрощают весь процесс разработки.
Как использовать библиотеки JavaScript
Чтобы использовать библиотеку JavaScript в приложении, добавьте <script> в элемент <head> с помощью атрибута src, который ссылается на исходный путь библиотеки или URL-адрес.
Обязательно прочтите документацию библиотеки JavaScript, которую вы собираетесь использовать для получения дополнительной информации, и следуйте приведенным там инструкциям.
Для чего используются библиотеки JavaScript?
Как мы уже говорили, библиотеки JavaScript используются для выполнения определенных функций. Существует около 83 из них, каждая из которых создана для определенной цели, и в этом разделе мы собираемся рассказать о некоторых аспектах их удобства использования.
Вы можете использовать библиотеки JavaScript для:
Визуализация данных на картах и диаграммах
Визуализация данных в приложениях имеет решающее значение для пользователей, позволяя четко просматривать статистику в панели администратора, панелях мониторинга, показателях производительности и т. д.
Представление этих данных в виде диаграмм и карт поможет вам легко анализировать информацию и принимать обоснованные бизнес-решения.
Примеры: Chart.js, Apexcharts, Algolia Places
Манипуляция с DOM
Объектная модель документа (DOM) представляет веб-страницу (документ) в виде объектов и узлов, которые можно изменять с помощью JavaScript. Вы можете изменить его содержание, стиль и структуру.
Примеры: jQuery, Umbrella JS.
Обработка данных
В связи с огромными объемами данных, с которыми сегодня предприятия имеют дело ежедневно, правильная обработка и управление ими крайне важны. Использование библиотеки JavaScript упрощает обработку документа, отслеживающего его содержимое, при этом добавляя больше интерактивности.
Примеры: D3.js
База данных
Эффективное управление базами данных необходимо для чтения, создания, удаления, редактирования и сортировки данных. Вы также можете использовать сложные запросы, автоматическое создание таблиц, синхронизацию и проверку данных и многое другое.
Примеры: TaffyDB, ActiveRecord.js
Формы
Используйте библиотеки JS для упрощения функций форм, включая проверку форм, синхронизацию, обработку, условные возможности, элементы управления полями, преобразование макетов и многое другое.
Примеры: wForms, LiveValidation, Validanguage, qForms
Анимация
Люди любят анимацию, и вы можете использовать ее, чтобы сделать вашу веб-страницу интерактивной и более привлекательной. Добавление микро-взаимодействий и анимаций легко сделать с помощью библиотек JavaScript.
Примеры: Anime.js, JSTweener
Эффекты изображения
Пользователи могут добавлять эффекты к изображениям и выделять их с помощью библиотек JS. Эффекты включают в себя размытие, осветление, тиснение, повышение резкости, оттенки серого, насыщенность, оттенок, регулировку контраста, переворачивание, инвертирование, отражение и т. д.
Примеры: ImageFX, Reflection.js
Шрифты
Пользователи могут использовать любой шрифт, чтобы сделать свою веб-страницу более привлекательной в зависимости от типа контента.
Примеры: typeface.js
Математические и строковые функции
Добавление математических выражений, даты, времени и строк может быть непростым делом. Например, дата состоит из множества форматов, косых черт и точек, что усложняет вам задачу. То же самое и с матрицами и векторами.
Используйте библиотеки JavaScript, чтобы упростить эти сложности в дополнение к легкому манипулированию и обработке URL-адресов.
Примеры: Date.js, Sylvester, JavaScript URL Library.
Пользовательский интерфейс и его компоненты
Вы можете обеспечить лучший пользовательский опыт с помощью веб-страниц, сделав их более отзывчивыми и динамичными, уменьшив количество операций DOM, повысив скорость страницы и т. д.
Примеры: ReactJS, Glimmer.js
И это лишь самые распространенные случаи использования. Другие виды использования библиотек JavaScript включают в себя:
- Создание пользовательского диалогового окна
- Создание сочетаний клавиш
- Коммутационные платформы
- Создание закругленных углов
- Влияние на поиск данных/AJAX
- Выравнивание макетов страниц
- Создание навигации и маршрутизации
- Ведение журнала и отладка
- … и многое другое.
Самые популярные библиотеки JavaScript
jQuery
jQuery — это классическая библиотека JavaScript, быстрая, легкая и многофункциональная. Она была создана в 2006 году Джоном Ресигом в BarCamp NYC. jQuery — бесплатное программное обеспечение с открытым исходным кодом и лицензией MIT.
Библиотека упрощает работу с HTML-документами, а также их обход, анимацию, обработку событий и Ajax.
По данным W3Techs, 77,6% всех сайтов используют jQuery (по состоянию на 23 февраля 2021 г.).
Особенности и преимущества:
- Простой в использовании минималистичный API.
- Библиотека использует селекторы CSS3 для управления свойствами стиля и поиска элементов.
- Легкая, занимает всего 30 КБ для сжатия и минимизации, и поддерживает модуль AMD.
- Поскольку синтаксис библиотеки очень похож на синтаксис CSS, новичкам ее легко освоить.
- Возможность расширения с помощью плагинов.
- Универсальность с помощью API, поддерживающего несколько браузеров, включая Chrome и Firefox.
Сценарии использования:
- Манипуляция DOM с помощью CSS-селекторов, которые используют определенные критерии для выбора узла в DOM. Эти критерии включают имена элементов и их атрибуты (например, класс и идентификатор).
- Выбор элемента в DOM с помощью Sizzle (мультибраузерный механизм выбора с открытым исходным кодом).
- Создание эффектов, событий и анимации.
- Разбор JSON.
- Разработка приложений Ajax.
- Обнаружение функции.
- Контроль асинхронной обработки с помощью объектов Promise и Deferred.
React.js
React.js (также известный как ReactJS или React) — это интерфейсная библиотека JavaScript с открытым исходным кодом. Она была создана в 2013 году Джорданом Уолком, который работает в Facebook инженером-программистом.
Сейчас библиотека имее лицензию MIT, однако изначально была выпущена под лицензией Apache License 2.0. React был разработан, чтобы сделать создание интерактивного пользовательского интерфейса безболезненным.
Просто создайте простое представление для отдельных состояний в своем приложении, после чего библиотека будет эффективно отображать и обновлять нужный компонент при изменении данных.
Особенности и преимущества:
- Код React содержит компоненты или сущности, которые нуждаются в рендеринге для определенного элемента в DOM с помощью библиотеки React DOM.
- Он использует виртуальный DOM, создавая кэш в памяти в структуре данных, вычисляя разницу и эффективно обновляя отображаемый DOM в браузере.
- Благодаря этому выборочному рендерингу производительность приложения повышается, экономя усилия разработчиков при пересчете макета страницы, стилей CSS и полностраничного рендеринга.
- Он использует методы жизненного цикла, такие как render и componentDidMount, чтобы разрешить выполнение кода в определенных точках в течение жизненного цикла объекта.
- Он поддерживает JavaScript XML (JSX), который сочетает в себе JS и HTML. Это помогает в рендеринге компонентов с вложенными элементами, атрибутами, выражениями JS и условными операторами.
Сценарии использования:
- Служит базой при разработке мобильных или одностраничных приложений.
- Рендеринг состояния в DOM и управление им.
- Создание эффективных пользовательских интерфейсов при разработке веб-приложений и интерактивных сайтов.
- Упрощение отладки и тестирования.
Бонус: все Facebook, Instagram и Whatsapp используют React.
D3.js
Data-Driven Documents (D3) или D3.js — еще одна известная библиотека JS, которую разработчики используют для управления документами на основе данных. Она была выпущена в 2011 году под лицензией BSD.
Особенности и преимущества:
- Подчеркивает веб-стандарты и предоставляет вам современные возможности браузера, не ограничиваясь единой структурой.
- D3.js обеспечивает мощную визуализацию данных.
- Поддерживает HTML, CSS и SVG.
- Использует подход, основанный на данных, и применяет его для управления DOM.
- D3.js работает быстро и поддерживает большое количество динамического поведения и наборов данных для анимации и взаимодействия.
- Снижает издержки, обеспечивая более широкую графическую сложность при высокой частоте кадров.
Сценарии использования:
- Для создания интерактивной и динамической визуализации данных.
- Чтобы привязать данные к DOM и выполнить над ними управляемое данными преобразование. Например, вы можете сгенерировать HTML-таблицы из массива чисел, а затем создать SVG-гистограмму или 3D-график поверхности с помощью D3.js.
- Его функциональный код позволяет многократно использовать его с огромным набором модулей.
- D3 предоставляет различные режимы для изменения узлов, таких как изменение стилей или атрибутов, декларативный подход, добавление, сортировка или удаление узлов, изменение текста или содержимого HTML и т. д.
- Для создания анимированных переходов, упорядочивания сложных переходов через события, выполнения переходов CSS3 и т. д.
Underscore.js
Underscore — это служебная библиотека JavaScript, которая предоставляет различные функции для типичных задач программирования. Она была создана в 2009 году Джереми Аскенасом и выпущена под лицензией MIT. Теперь ее обогнала Lodash.
Особенности и преимущества:
- Функции аналогичны Prototype.js (другой популярной служебной библиотеке), но Underscore имеет дизайн функционального программирования, а не расширения прототипов объектов.
- Имеет более 100 функций 4 различных типов в зависимости от типов данных, которыми они манипулируют. Это функции, с помощью которых можно управлять:
- Объекты
- Массивы
- И объекты, и массивы
- Прочие функции
- Underscore совместим с Chrome, Firefox, Edge и другими.
Сценарии использования:
- Поддерживает функциональные помощники, такие как фильтры, карты и другие, а также специализированные функции, такие как привязка, быстрая индексация, шаблоны JavaScript, тестирование качества и т. д.
Lodash
Lodash также является служебной библиотекой JS, которая упрощает работу с числами, массивами, строками, объектами и т. д. Она была выпущена в 2013 году и также использует дизайн функционального программирования, такой как Underscore.js.
Особенности и преимущества:
- Помогает вам писать удобные и лаконичные коды JavaScript.
- Упрощает общие задачи, такие как математические операции, привязка, регулирование, декорирование, ограничение, устранение ошибок и т. д.
- Строковые функции, такие как обрезка, верблюжий регистр и верхний регистр, стали проще.
- Создание, изменение, сжатие и сортировка массивов.
- Другие операции с коллекцией, объектом и последовательностью.
Сценарии использования:
Его модульные методы помогут вам с:
- Итерация массивов, строк и объектов.
- Создание составных функций.
- Манипулирование и тестирование ценностей.
Algolia Places
Algolia Places — это библиотека JavaScript, которая обеспечивает простой и распределенный способ использования автозаполнения адресов на вашем сайте. Это невероятно быстрый и удивительно точный инструмент, который может помочь сделать ваш сайт более удобным для пользователей. Algolia Places использует впечатляющую базу данных с открытым исходным кодом OpenStreetMap для охвата мест по всему миру.
Например, вы можете использовать ее для увеличения конверсии страницы вашего продукта.
Особенности и преимущества:
- Упрощает оформление заказа за счет одновременного заполнения нескольких входных данных.
- Вы можете легко использовать селектор страны или города.
- Вы можете быстро просмотреть результаты, отображая предложения ссылок на карте в режиме реального времени.
- Algolia Places может обрабатывать опечатки и соответствующим образом отображать результаты.
- Предоставляет результаты в течение миллисекунд, автоматически перенаправляя все запросы на ближайший к ним сервер.
Сценарии использования:
- Позволяет добавить карту для отображения определенного местоположения, что весьма полезно.
- Позволяет вам эффективно использовать формы.
Anime.js
Если вы хотите добавить анимацию на свой сайт или в приложение, Anime.js — одна из лучших библиотек JavaScript, которые вы можете найти. Она была выпущена в 2019 году и имеет легкий, но мощный и простой API.
Особенности и преимущества:
- Anime.js работает с атрибутами DOM, свойствами CSS, преобразованиями SVG, CSS и объектами JS.
- Работает с широким спектром браузеров, таких как Chrome, Safari, Firefox, Opera и т. д.
- Его исходный код легко расшифровать и использовать.
- Сложные методы анимации, такие как перекрытие и постепенное завершение, становятся проще.
Сценарии использования:
- Вы можете использовать потрясающую систему Anime.js по свойствам и срокам.
- Создавайте многоуровневые преобразования CSS с несколькими таймингами одновременно над одним элементом HTML.
- Воспроизведение, пауза, запуск, реверсирование и управление событиями синхронно с помощью функций обратного вызова и управления Anime.js.
Animate On Scroll (AOS)
Animate On Scroll отлично подходит для одностраничных веб-сайтов с параллаксом. Эта библиотека JS имеет полностью открытый исходный код и помогает добавлять на ваши страницы приличную анимацию, которая красиво выглядит при прокрутке вниз или вверх, что делает дизайн вашего сайта приятным, помогая вам добавлять эффекты затухания, статические позиции привязки и многое другое, тем самым радуя ваших пользователей.
Особенности и преимущества:
- Библиотека может определять позиции элементов и добавлять подходящие классы, пока они отображаются в области просмотра.
- Помимо простого добавления анимации, она помогает вам изменять их на видовом экране.
- Без проблем работает на разных устройствах, будь то мобильный телефон, планшет или компьютер.
- Поскольку библиотека написана на чистом JavaScript, у нее нет зависимостей.
Сценарии использования:
- Анимация элемента в соответствии с положением другого элемента.
- Анимация элементов в зависимости от их положения на экране.
- Отключение анимации элементов на мобильных устройствах.
- Создание различной анимации, такой как затухание, переворот, слайд, масштабирование, размещение якорей и т. д.
Bideo.js
Хотите добавить полноэкранные видео в фон своего сайта? Попробуйте Bideo.js.
Особенности и преимущества:
- С помощью этой библиотеки JavaScript легко добавить фоновой видео.
- Эта функция круто смотрится на экранах разного масштаба и размера, а также работает без сбоев.
- Размер добавленных видео может изменяться в зависимости от используемого браузера.
- Легко реализовать с помощью CSS / HTML.
Сценарии использования:
- Для добавления на сайт отзывчивых полноэкранных фоновых видеороликов.
Chart.js
Ваш сайт или проект связаны с областью анализа данных?
Вам нужно представлять много статистических данных?
Chart.js — отличная библиотека JavaScript для таких целей.
Chart.js — это гибкая и простая библиотека для дизайнеров и разработчиков, которые могут мгновенно добавлять красивые диаграммы и графики в свои проекты. Она имеет открытый исходный код и лицензию MIT.
Особенности и преимущества:
- Элегантное и простое добавление базовых диаграмм и графиков.
- Результативная в создании адаптивных веб-страниц.
- Легкая для загрузки и простая в освоении и реализации.
- 8 разных типов графиков.
- Отлично подходит для новичков.
- Возможности анимации, чтобы сделать страницы более интерактивными.
Сценарии использования:
- Обеспечьте четкое визуальное представление при использовании разных наборов данных с помощью смешанных типов диаграмм.
- Наносите на график разреженные и сложные наборы данных в логарифмическом масштабе, шкале даты, времени или произвольной шкале.
Продолжение следует…
Всем успешной работы и творчества!
Источник
JavaScript библиотеки для создания круговых диаграмм
Morris.js
Эта библиотека создана под девизом «Красивые диаграммы не должны быть сложными». Графики, гистограммы, круговые и кольцевые диаграммы выглядят красиво, а API получилось действительно несложным.gRaphael
Маленькая, но очень функциональная библиотека, позволяющая не только выводить на странице графики и диаграммы, но и производить манипуляции над графическими объектами, добавлять спецэффекты к изображениям и создавать необычные управляющие элементы.jqPlot
jqPlot — плагин к библиотеке jQuery, генерирующий красивые диаграммы самых разных видов (линейные, гистограммы, круговые и др.) и отображающий множество вспомогательных элементов: оси (в том числе до 9 вспомогательных), легенды, значения и различные всплывающие подсказки и прочее.ECharts
Комплексная библиотека графиков и диаграмм, поддерживающая более 17 основных видов, не считая их комбинаций. Количество и разнообразие действительно впечатляет.Circle
Эта библиотека генерирует только круговые диаграммы с анимацией, но если вам этого достаточно, то это отличный выбор, учитывая, что в минимизированном виде она занимает чуть больше 5 kB.JSGraphics.js
JSGraphics.js позволяет динамически рисовать на странице не только графики, но и различные графические примитивы — линии, окружности, полигоны и полилинии. Очень легка в использовании даже для тех, кто не обладает большим опытом в написании Java-скриптов.CircleDonutChart
CircleDonutChart отображает на странице кольцевую диаграмму в 2D представлении при помощи рисования примитивов SVG-графики в заданном элементе. Изменения значений сопровождаются плавной анимацией.jQuery Kontrol
Экспериментальная библиотека, содержащая элементы управления в виде кольцевого манипулятора, XY манипулятора и манипулятора в виде гистограммы. Работает напрямую с canvas и не использует png или jpg спрайты. Поддерживает управление клавиатурой, мышью и жестами.Chart.js
Легкая, объектно-ориентированная библиотека для отображения графиков и диаграмм. Предоставляет 8 способов визуализации данных. Разработчик может управлять всеми аспектами построения диаграмм, что позволят получить впечатляющие графики, в том числе на retina-дисплеях. Для отображения использует элемент canvas и работает во всех HTML5 совместимых браузерах.Circliful
Как же разработчики любят круговые диаграммы! И вот еще одна — Circliful. Построена на HTML5 и jQuery и полагается целиком на динамическую отрисовку, не используя никаких спрайтов. В результате получаем четкие диаграммы на экранах любого разрешения.Cake Chart
Библиотека, отображающая многоуровневую интерактивную круговую диаграмму. Сама библиотека только отображает заданный уровень, но не обеспечивает навигацию между ними. Впрочем, это совсем несложно сделать и самому.Топ 15 лучших инструментов визуализации данных в 2020- 2021 годах (с примерами)
Меня зовут Максим Кульгин и моя компания занимается парсингом сайтов в России порядка четырех лет. Ежедневно мы парсим более 500 крупнейших интернет-магазинов в России и на выходе мы, как правило, отдаем данные в формате Excel/CSV и этих данных много. Наши клиенты анализируют полученные «сырые» данные в аналитических инструментах (например, работают с Olap- кубами с данными Wildberries), часть из которых мы и рассмотрим ниже. В конце статьи мы привели ссылки на рассматриваемые инструменты.
4241 просмотров
Большие данные – это весьма актуальная потребность. Их обработка помогает описывать изменения прибыльности вашего бизнеса, отслеживать действия клиентов и лучше понимать свои маркетинговые усилия. Однако данные в необработанном виде не так просто понимать.
Вот почему нам нужна их визуализация. Инструменты визуализации данных помогают всем от маркетологов до специалистов по обработке данных сортировать на классы необработанные данные и демонстрировать результаты и обработки с помощью диаграмм, графиков, видео и т.д.
Естественно, человеческий глаз привлекают цвета и узоры. Фактически, 90% информации, поступающей в мозг, является визуальной.
А для предприятий использование аналитики и визуализации данных обеспечивает прибыль в размере 13,01 доллара на каждый потраченный доллар [2 — см. ссылки чуть ниже для более подробной информации и источниках данных]. Кроме того, 79% руководителей предприятий считают, что компании потерпят неудачу, если не будут учитывать большие данные [3].
Если у вас есть собственный интернет-магазин или вам нужно представить заинтересованным владельцам компании важные данные, инструменты обработки из этого списка вам очень помогут.
[3] См. https://kommandotech.com/statistics/big-data-statistics/
В этом посте я собрал и рассмотрел лучшие инструменты визуализации данных для подключения к вашей серверной базе данных. Эти обзоры инструментов основаны на таких критериях, как простота использования, стилевое форматирование через панели управления информацией с возможностью перетаскивания данных, возможности интеграции с другими программами, цены и ряде других показателей.
Давайте начнем…
Каковы лучшие инструменты визуализации данных?
1. Databox
Лучший инструмент для визуализации данных и бизнес-аналитики.
Databox – это инструмент визуализации данных, которым пользуются более 15 000 предприятий и маркетинговых агентств. Databox собирает ваши данные в одно место, чтобы отслеживать производительность бизнеса в реальном времени с помощью привлекательных визуальных эффектов.
Databox лучше всего подходит для маркетинговых команд, которые хотят быстро настроить информационные панели. Благодаря более чем 70 интеграциям в один клик с другими программами и отсутствию необходимости программирования, это самый простой в использовании инструмент.
• Более 200 готовых отчетов, охватывающих все области: от CRM (системе управления информацией о клиентах) и Google Analytics до Google Ads, эффективности электронной почты и автоматизации маркетинга.
• Более 70 интеграций в один клик, которые объединяются с данными из таких популярных инструментов, как HubSpot, Salesforce, Mailchimp, Facebook Ads, Shopify и т.д.
• Легкое создание расширенных вычислений данных из нескольких источников, включая ROAS, ARPU, LTV, LTV: CAC и т.д.
У Databox есть бесплатный план, который позволяет участвовать 3 пользователям, создавать 3 источника данных, которые можно обновлять ежедневно. Их платные планы варьируются от 49 до 248 долларов в месяц.
Их базовый план за 49 долларов в месяц – лучший выбор, поскольку он предоставляет 10 учетных записей пользователей, 10 источников данных, 10 панелей мониторинга, данные, которые обновляются ежечасно, и доступ к их API (интерфейс прикладных программ).
Начните работу с Databox и попробуйте его бесплатно.
2. Zoho Analytics
Zoho Analytics, вероятно, один из самых популярных инструментов бизнес-аналитики в этом списке. Единственное, в чем вы можете быть уверены, – это то, что с помощью Zoho Analytics вы можете безопасно загружать свои данные. Более того, вы можете использовать широкий набор диаграмм, таблиц и компонентов, чтобы преобразовать ваши данные в сжатый вид.
Zoho Analytics обслуживает преимущественно крупные предприятия, включая Bajaj Allianz, Maruti Suzuki, HP, Hyundai Motors и HDFC. Однако он подходит и для среднего бизнеса.
• Помогает создавать зрительно привлекательные отчеты с визуализацией данных.
• Он очень прост в использовании, а панель управления информацией интуитивно понятна.
• Обладает надежной политикой безопасности данных.
• Предоставляет обширную поддержку клиентов, которая пригодится новичку.
• Позволяет легко встраивать отчеты и информационные панели на веб-сайты и в каналы социальных сетей.
• Извлекает данные из нескольких ресурсов и затем обрабатывает их для создания подробных отчетов.
• Поставляется с виртуальным помощником на основе ИИ, который поможет вам в процессе визуализации данных.
Тарифные планы начинаются с 25 долларов в месяц и варьируются до 495 долларов в месяц. Вы также получаете 15-дневную бесплатную пробную версию для ознакомления с продуктом.
Начните работу с Zoho Analytics.
3. Tableau
Если вы хотите с легкостью просматривать и визуализировать данные, Tableau – это инструмент визуализации данных для вас. Он помогает вам создавать диаграммы, карты и любой другой тип профессиональной графики. Чтобы улучшить ваши визуальные представления, вы также можете найти настольное приложение этого инструмента.
Более того, если у вас возникнут проблемы с установкой какого-либо стороннего приложения, Tableau содержит опцию – решение «заблокировать сервер», которое поможет визуализировать отчеты в Интернете или с помощью мобильных приложений.
Tableau больше всего подходит для корпораций, которым нужны решения для визуализации данных без необходимости настраивать их вручную.
• Продукт оптимизирован для мобильных устройств и легко обновляется.
• Обеспечивает обширную поддержку клиентов.
• Позволяет легко выполнять смешивание данных
• Корпоративная команда может выполнять анализ своих данных в реальном времени.
• Предоставляет доступ ко всем типам аналитики данных, включая IT-аналитику, аналитику официальных данных, маркетинговую аналитику, страховую аналитику и многое другое.
• Предлагает отдельный бесплатный инструмент под названием Tableau Public, который предоставляет некоторые функции, но не позволяет сохранять отчеты локально.
• Предлагает расширения JavaScript и API для пользовательских отчетов через библиотеки диаграмм JavaScript.
• Нет возможности автоматического обновления отчетов.
• Это решение не полностью комплексное, и вам потребуются предварительные знания SQL (реляционные базы данных).
Тарифные планы начинаются с 12 долларов за пользователя в месяц и варьируются до 70 долларов за пользователя в месяц.
4. Infogram
Infogram – это веб-платформа для визуализации данных и инфографики. Она позволяет создавать и публиковать инфографику, карты и диаграммы, используя все пользовательские данные и преобразовывая их в привлекательную графику.
После этого вы можете далее делиться, вставлять или публиковать эту графику, где захотите. Более того, этот инструмент прост в использовании и подходит для государственных органов, маркетинговых команд и даже для студентов.
Хорошая новость заключается в том, что вам не требуются какие-либо технические знания или навыки программирования, чтобы начать работу с Infogram. Тарифы также различаются в зависимости от типа использования, поэтому вам не нужно беспокоиться о доплате. А если вы хотите применять ее базовые функции и для дизайна, то это совершенно бесплатно.
Infogram больше всего подходит для организаций, которые занимаются продажами и маркетингом, поскольку позволяет отображать ваши цели с помощью диаграмм и шаблонов. Это также полезно для аудиторских компаний.
• Помимо того, что она полезна для корпораций и государственных органов, платформа также весьма удобна для студентов.
• Предоставляет настраиваемые шаблоны, которые помогут вам добавить цвета, шрифты, логотипы и многое другое.
• Она предлагает широкий выбор изображений, значков и флагов. Присутствуют соответствующие наборы карт и схем.
• Шаблоны помогают создавать изображения в социальных сетях, информационные панели и отчеты.
• В ней есть несколько красивых шаблонов проектов, которые могут превращать данные в интересный контент.
• Навигация по вашим данным может быть сложной задачей.
• Поддержка клиентов нуждается в улучшении.
Платные планы начинаются с 19 долларов в месяц и составляют до 149 долларов в месяц. Кроме того, есть один тарифный план, который поможет вам выбрать все функции, которые вам нужны, в зависимости от требований вашего бизнеса. Infogram также предлагает тарифный план Freemium для основных функций.
5. ChartBlocks
ChartBlocks – это инновационное программное обеспечение для визуализации данных, которое позволяет импортировать данные за доли секунды. Более того, вы можете сразу же обновить свои данные в приложении ChartBlocks и выполнить необходимый импорт.
Оно также поставляется с «конструктором диаграмм», который поможет вам создать нужный тип диаграммы. Имеет определенный высокий уровень сложности инструментов. После этого вы можете легко встроить диаграммы на свой сайт или в любую другую социальную сеть.
Инструмент лучше всего подходит для индустрии туризма, здравоохранения, страхования и розничной торговли.
• Обеспечивает отличную поддержку клиентов.
• Упрощает загрузку файлов данных.
• Позволяет создавать и публиковать диаграммы за считанные минуты.
• Вы можете использовать одни и те же данные для создания различных диаграмм.
• Поставляется со встроенными инструментами для социальных сетей, которые помогут вам напрямую поделиться и встраивать свои диаграммы.
• Оно совместимо со всеми типами мобильных устройств и подходит для экрана любого размера.
• Предоставляет ограниченный размер памяти для загрузки ваших данных.
• Качество экспорта результатов не самое удачное в бесплатной версии.
Первый план совершенно бесплатный, и вы получаете до 50 активных графиков. После этого платные планы начинаются от 20 долларов в месяц.
6. Datawrapper
Datawrapper – еще одна отличная программа для визуализации данных в этом списке. Ваша целевая аудитория должна понимать, какой тип диаграммы вы создаете. Кроме того, учитывайте, что скриншот Excel неплохо выглядит на экране вашего компьютера, но он плохо читается на экране мобильного устройства.
И Datawrapper решает эту проблему автоматически. Все диаграммы, таблицы и карты, которые вы создаете с помощью Datawrapper, легко читаются на всех устройствах. Хорошая новость заключается в том, что для создания диаграмм вам не нужны навыки программирования.
Поскольку Datawrapper является некоммерческой платформой, она больше всего подходит для студентов и небольших организаций, которым требуются базовые функции визуализации данных.
• Предоставляет широкий набор встроенных диаграмм и графиков
• Не требует каких-либо технических знаний.
• Это инструмент с открытым исходным кодом и совершенно бесплатный.
• Графики, карты и другая графика автоматически сохраняются после их создания.
• Инструмент Datawrapper совместим со всеми операционными системами.
• Позволяет легко редактировать и комментировать ваши диаграммы
• Одним из самых больших недостатков является то, что с бесплатным планом ваши данные будут храниться на сервере Datawrapper.
• Настройка шрифтов и цветов может быть сложной задачей.
Он предоставляется совершенно бесплатно, если вы хотите иметь базовый набор дизайна и диаграмм. Бесплатный план также позволяет вам экспортировать диаграммы, таблицы и карты в формат png. Платные планы начинаются с 499 € в месяц.
7. Plotly
Plotly не только помогает вам создавать графики, но также предоставляет подробные аналитические отчеты, которые помогут вам отслеживать данные. Он также имеет легко настраиваемый пользовательский интерфейс.
Кроме того, он помогает легко экспортировать отчеты и отлично работает в области бизнес-аналитики.
У Plotly есть такие коммерческие предложения, как Dash Enterprise и Chart Studio Enterprise. Следовательно, он больше подходит для профессиональных групп экспертов, которым требуется крупномасштабная наука о данных и применение ИИ. Помимо этого, он идеально подходит, как для студентов, так и для малого бизнеса.
• Одной из важных особенностей Plotly является то, что он предоставляет несколько вариантов своего развертывания, что позволяет вам приобретать решения разными способами.
• Вы можете добавить несколько членов команды для одновременной работы с программой, что помогает в совместной работе команды и упрощает выполнение ваших задач.
• Поставляется с мощными инструментами визуализации и высококачественными инструментами аналитики.
• В этой программе и при составлении интерактивных отчетов можно заниматься разработкой приложений.
• При визуализации данных он обеспечивает имитационное моделирование, настраиваемые информационные панели и соответствующие отчеты.
• Поддерживает такие популярные языки, как R, Python, Node и другие.
• Не оказывает поддержку пользователям по телефону.
• Тарифные планы недоступны на официальном сайте.
Цена зависит от количества пользователей. Кроме того, инструмент открыт для использования, но в течение ограниченного времени. После этого вам нужно будет его приобрести.
8. Visually
Visually – это платформа сообщества для визуализации данных и инфографики. Это позволяет пользователям искать различные изображения с помощью тегов и описаний. Вы также можете публиковать и встраивать графику прямо в свои профили в социальных сетях. Она работает в три простых шага.
Как и Zoho Analytics, Visually обслуживает такие крупные ИТ-компании, как KPMG, Tiger Analytics и Xoriant. Однако она также подходит для среднего бизнеса.
• Помогает создавать привлекательную инфографику, видео, электронные книги, отчеты и многое другое для вашей компании.
• Инструмент визуализации Twitter также является частью Visually
• Пользователи могут собирать информацию из нескольких баз данных
• Поддержка клиентов широкая, и персонал компании готов помочь со всеми проблемами, с которыми вы сталкиваетесь.
• Вам не нужны навыки программирования; вам просто нужно указать свои требования, и вы получите нужный тип графики.
• Доступна только на английском языке.
• Не предоставляет фиксированный тарифный план.
Цена зависит от количества пользователей. Кроме того, инструмент открыт для использования, но в течение ограниченного времени. После этого вам нужно будет его приобрести.
9 D3.js
D3.js – невероятно гибкий инструмент визуализации данных на основе Javascript. Он поддерживает декларативное программирование и помогает управлять документами на основе данных. Он также поддерживает большие наборы данных, и вы найдете его очень простым в использовании.
Помимо этого, он предоставляет такие уникальные функции, как возможность повторного использования кода, широкий спектр функций создания кривых, помощь в связывании данных с элементом на страницах HTML и многое другое.
Он лучше всего подходит для тех фирм, которым необходимо создавать веб-страницы и веб-сайты. Вы также можете создавать отличные приложения с помощью этого инструмента визуализации данных.
• Это проект с открытым исходным кодом и работает без каких-либо плагинов.
• Он требует минимального программирования и помогает визуализировать данные с любыми предварительными техническими знаниями.
• Позволяет визуализировать данные формата HTML, SVG и CSS.
• С помощью этого инструмента вы можете легко создать компонент диаграммы.
• Вам не нужно загружать всю библиотеку каждый раз
• Помогает вам в манипуляциях с объектной моделью документа (DOM)
• Вы также можете создать HTML-таблицу из широкого набора чисел.
• Он немного сложно устроен и требует много времени на освоение.
• Ему следует быть более гибким в настройках и предлагать их лучшие варианты
Он предлагает тарифный план, по которому вам нужно связаться с продавцом.
10. Ember Charts
Ember Charts больше похожа на библиотеку диаграмм, созданную с помощью фреймворков Ember.js и d3.js. С помощью Ember Charts вы можете создавать графики для временных рядов, точечные и круговые диаграммы и гистограммы. Более того, он помогает вам легко расширять и изменять диаграммы, поскольку предлагает отличные возможности настройки.
Ember Charts подходит для вашей организации, если вам часто требуются статистические графики. Более того, если вам нужна такая графика, как столбчатая или горизонтальная диаграмма, круговая диаграмма, линейная диаграмма с накоплением данных и разбросом точек, тогда это также отличный инструмент.
• Ember Charts поставляется с простой панелью управления. Таким образом, его легко использовать
• Обеспечивает высокий уровень настраиваемости
• Он предоставляет уникальные и богатые функции и позволяет добавлять в проект легенду, всплывающие подсказки, метки и эффекты при наведении курсора мыши.
• Он предлагает мощные и совершенные диаграммы.
• Если вы добавите данные, которые не являются нормальными, ваша диаграмма не сломается. Это означает, что, если вы добавите неверные данные, Ember Charts не перестанет работать с нею.
• Он совершенно бесплатен
• Вы можете расширить класс раздела Компоненты диаграммы для создания собственных диаграмм.
• Продукт не так популярен, как другие инструменты в этом списке, поэтому вы не сможете прочитать достаточное количество отзывов, прежде чем начнете использовать этот продукт.
Это бесплатный инструмент, не требующий дополнительных затрат.
11. NVD3
NVD3 позволяет создавать переналаживаемые диаграммы вместе с компонентами диаграмм для d3.js. Хорошая новость заключается в том, что он сохраняет все настраиваемые компоненты и не лишает вас контроля, предоставляемого d3.js.
Если вы предпочитаете аккуратные и настраиваемые диаграммы данных, вы можете попробовать NVD3. А поскольку он бесплатный, он идеально подходит и для небольших организаций.
• NVD3 дает вам возможность создавать переналаживаемые диаграммы
• Поставляется с многочисленными типами диаграмм, включая гистограммы временных рядов, точечные и линейные диаграммы и многое другое.
• Обеспечивает высокий уровень настраиваемости
• Документация чересчур краткая, что отнимет у вас много времени на освоение, чем следовало бы.
• Вам нужно посмотреть пример кода, чтобы понять, как он работает
• Работа над NVD3 продолжается. Инструмент визуализации все еще требует некоторой доработки из-за проблемы этикеток (отметок)
Вы можете бесплатно использовать инструмент визуализации данных NVD3.
12. Google Charts
Google Charts – еще один отличный инструмент для визуализации данных в этом списке. Он работает на кодах SVG и HTML5 и позволяет создавать довольно интерактивные диаграммы. Это также дает вам больше контроля над создаваемыми вами диаграммами и позволяет их масштабировать. Кроме того, он удобен в использовании, поэтому вы можете быстро приступить к работе.
Google Charts подходит для всех типов организаций, будь то компании среднего размера, стартапы или крупные предприятия. Более того, он лучше всего подходит для организаций, которым необходимо создавать, управлять и представлять данные с помощью таблиц данных, интеграции с таблицами Google и анимации.
• Google Charts прост в использовании. Вам не нужно заранее иметь какие-либо технические знания, чтобы использовать его
• Вы можете легко интегрировать Google Charts с другими продуктами Google.
• Он позволяет легко встраивать диаграммы на свой сайт и в социальные сети.
• Поставляется с обширной галереей картинок и множеством шаблонов.
• Он отображает данные на вашем сайте быстро и в режиме реального времени.
• Предоставляет интерактивную панель управления информацией
• Поставляется совершенно бесплатно
• Не очень подходит для углубленной персонализации программы под нужды пользователя.
• Вы можете столкнуться с небольшими трудностями при творческом подходе к графикам.
Google Charts – это бесплатный продукт.
13. FusionCharts
FusionCharts – это программное обеспечение для визуализации данных на основе JavaScript, которое поставляется с обширной библиотекой диаграмм. Оно помогает извлекать необработанные данные из многочисленных баз данных и превращать их в содержательные отчеты.
Более того, оно предоставляет более 90 встроенных диаграмм и более 1000 карт, которые помогут вам преобразовать данные в интерактивные информационные панели.
FusionCharts лучше всего подходит для организаций, которым необходимо создавать информационные панели в рамках своего проекта или продукта. Однако, поскольку оно стоит довольно дорого, то больше подходит для крупного бизнеса.
• FusionCharts предлагает гибкость в дизайне результатов.
• Обладает множеством таких преимуществ, как интерактивный характер, интерактивные данные и многочисленные цветовые схемы.
• Вы можете получить различные шрифты и макеты информационных панелей.
• Вы можете создать настраиваемую панель мониторинга с помощью FusionCharts.
• Предоставляет уникальные функции, включая реляционное отображение, визуальное обнаружение, согласованный API, кроссбраузерную поддержку и многое другое.
• Предлагает обширную документацию, чтобы можно было все детально разобрать
• Требует улучшения, когда речь идет о параметрах настройки.
• Оно относительно дорого, поэтому больше подходит для крупных предприятий.
Стоимость FusionCharts для одного пользователя начинается с 497 долларов. Тарифные планы варьируются до 9 947 долларов. Хорошая новость заключается в том, что вы можете получить бесплатную пробную версию, которую можете использовать перед окончательной покупкой.
14. Highcharts
Highcharts помогает вам создавать диаграммы на основе JavaScript на ваших веб-страницах. Он значительно упрощает визуализацию данных, обеспечивая широкие возможности настройки. Более того, он совершенно бесплатен для некоммерческого использования, в том числе для студентов, некоммерческих организаций и школьных веб-сайтов.
Highcharts лучше всего подходит для студентов и некоммерческих организаций, поскольку он бесплатен для некоммерческого использования.
• Highcharts предлагает множество различных типов диаграмм и поддерживает графики, сплайны, плоскости, сплайны с областями, столбцы и многое другое.
• Вы можете использовать Highcharts, чтобы легко отображать различные типы аналитики.
• Поставляется с широким набором сторонних плагинов.
• Бесплатен для некоммерческих проектов.
• Он динамичен по своей природе и позволяет добавлять, удалять или изменять серии данных и точки.
• Совместимость со всеми типами устройств, включая смартфоны, планшеты, настольные компьютеры и др.
• Highcharts может потребовать много вашего времени на выяснение и расчет значений оси координат
Официальный сайт не предоставляет подробную информацию о ценах на Highcharts. Вам нужно будет связаться с продавцом, чтобы узнать цену. Но он бесплатен для коммерческого использования.
15. Chart.js
Chart.js – это простой и гибкий инструмент визуализации для дизайнеров и разработчиков. Его поддерживает открытое сообщество, так что он тоже совершенно бесплатен. Другие важные функции включают возможность визуализировать данные восемью различными способами, отличную масштабируемость и многое другое.
Chart.js подходит для небольших проектов, которым требуются основные функции визуализации данных.
• Он прост в использовании и оснащен простой панелью управления.
• Позволяет визуализировать данные с помощью 8 различных типов диаграмм, включая полярные, столбчатые, кольцевые, радарные, круговые и другие.
• Графики данных могут быть анимированы и легко настраиваются.
• Вы можете добавлять и удалять любые типы диаграмм в Chart.js, чтобы уменьшить занимаемую площадь.
• Обеспечивает идеальную масштабируемость
• Самый большой недостаток Chart.js – медленный процесс отрисовки.
Chart.js – бесплатная платформа для визуализации данных.
16. Leaflet
Leaflet – это библиотека JavaScript с открытым исходным кодом, которая предоставляет интерактивные карты, удобные для использования на мобильных устройствах. Она совместима со всеми типами устройств, браузеров и сторонних плагинов. В целом, этот инструмент разработан с учетом простоты, производительности и удобства использования. Однако в нем не представлены гистограммы и круговые диаграммы.
Leaflet лучше всего подходит для организаций, которым нужны специализированные решения для отображения больших данных. Это также помогает организациям сэкономить много времени и ресурсов и добиться большего.
• Leaflet предлагает обширный архив плагинов
• Позволяет добавлять маски, тепловые карты активности пользователей и анимированные маркеры.
• Продукт использует данные OpenStreetMap, что позволяет добавлять интерактивность и визуализацию HTML5 / CSS3.
• Он очень отзывчив на изменения данных и удобен для мобильных устройств.
• Это платформа визуализации данных с открытым исходным кодом, что делает ее бесплатной.
• Сообщество, которое запускает этот инструмент, всегда готово помочь вам начать работу.
• Он мог бы быть более отзывчивым на запросы пользователей
• При кодировании данных может не отображаться ошибка.
Это платформа для визуализации данных с открытым исходным кодом, поэтому она абсолютно бесплатна.
Примечание: другие инструменты, еще не рассмотренные или не добавленные в эту статью, включают Microsoft Power BI и Sisense BI.
Что следует искать в инструментах визуализации данных?
По словам Бена Шнейдермана, американского ученого-информатика: «Визуализация дает вам ответы на вопросы, о которых вы даже не подозревали».
Возможности визуализации данных не знают границ, поэтому вы должны точно знать, на что обращать внимание при выборе инструмента. Каждый бизнес индивидуален, и потребности будут разными, но некоторые из необходимых функций одинаковы в разных отраслях.
Вот некоторые из них:
1. Легкое встраивание
Вам нужны большие данные, чтобы получать реальные бизнес-идеи. После этого вам необходимо встроить полученные данные на свои веб-страницы или в любой канал социальных сетей, чтобы адекватно продемонстрировать все выводы вашей целевой аудитории.
Будучи встроенными в программное обеспечение для бизнеса, эти инструменты могут упростить принятие действенных решений в реальном времени, которые в конечном итоге принесут пользу бизнесу. Правильные инструменты могут сделать процесс обмена и встраивания отчетов простым и понятным.
2. Удобство для пользователя
Вы должны убедиться, что можете в полной мере использовать приобретаемый вами инструмент визуализации данных. Этого не произойдет, если инструмент не будет удобным и простым в использовании. Вот почему важно, чтобы выбранный вами инструмент был удобным для пользователя и имел современную и интуитивно понятную панель управления.
3. Сотрудничество в реальном времени
Принятие решений в режиме реального времени требует межгруппового и внутригруппового сотрудничества в реальном времени в любом бизнесе. Это помогает делать выводы, к которым каждый член команды может получить мгновенный доступ, обеспечивает их лучшую наглядность и удерживает всех членов команды на одной странице.
4. Масштабируемость
Мотив любого бизнеса – это устойчивость и прибыльность. Вы сможете добиться этого, только если продолжите расти и расширять свой бизнес. Вот почему вам нужен инструмент с высокой степенью масштабируемости, ориентированный на будущее. Ваш бизнес сегодня может быть небольшим, но инструмент, который вы используете, должен иметь возможность масштабирования и соответствовать растущим требованиям вашего бизнеса.
5. ИИ-интеграция
ИИ (AI – Artificial Intelligence) – это следующий большой шаг в развитии технологий. Это может упростить анализ данных и помочь прогнозировать тенденции и предписывать необходимые изменения. Следовательно, интеграция с ИИ в вашем инструменте визуализации может подготовить ваш бизнес к будущему.
Помимо этого, некоторые из других функций, связанных с ИИ, на которые вам следует обратить внимание, включают обслуживание клиентов, поддержку потоковых данных, интерактивное исследование, динамическую инфраструктуру и многое другое.
Примеры визуализации данных.
Вот несколько лидеров отрасли на рынке и примеры того, как выглядят их информационные панели:
1. Tableau
Tableau насчитывает почти 60 000 аккаунтов и на сегодняшний день является лучшим инструментом на этом рынке.
Некоторые из его наиболее характерных особенностей:
• Обрабатывает огромные и динамические наборы данных.
• Работает с приложениями для работы с большими данными и ориентирован на машинное обучение.
• Интеграция с передовыми решениями для баз данных, таких как Salesforce, Hadoop, SAP, Teradata.
• Эффективная графика
Панель управления обеспечивает единый доступ к множеству функций для комплексного управления.
2. FusionCharts
FusionCharts, которым пользуются более 800 000 разработчиков из 28 000 компаний, на данный момент является одним из лучших на рынке. С их интерактивными и отзывчивыми диаграммами, обширной документацией и последовательным API предоставляемые информационные панели являются одними из лучших.
Некоторые из ключевых особенностей:
• Красивые диаграммы, графики и карты (более 90 разновидностей)
• Мощные инструменты анализа временных рядов
• Экспорт панелей целиком в формате PDF
• Обширная интеграция с другими программами
• Очень гибок и легко масштабируется
Это пример панели управления, которая отслеживает потребляемую энергию. Панели мониторинга невероятно информативны, подробны и конкретны.
3. Highcharts
Восемьдесят из 100 крупнейших компаний мира пользуются услугами Highcharts. Используемый десятками тысяч разработчиков, это один из самых простых, но мощных инструментов на рынке.
Некоторые из его функций включают:
• Продуманная навигация, аннотации и аналитика, ориентированная на потребности клиента.
• Интерактивные карты для отображения информации по географии
• Дружественный интерфейс
• Гибкость и масштабируемость
Отображение панели управления не требует специального обучения визуализации данных, что делает его привлекательным даже для новичков. Его USP (уникальное предложение услуги) – это кроссбраузерная поддержка, которая позволяет любому пользователю запускать интерактивную визуализацию.
4. Datawrapper
Datawrapper – это бесплатный инструмент визуализации данных на основе браузера, который подходит практически для любой отрасли.
Некоторые из его особенностей:
• Дружественный интерфейс
• 19 адаптивных и интерактивных типов диаграмм
• Не требуется опыта в кодировании
• Копирование и вставка данных из сети, из программы Excel или листов с данными
• Загрузка файлов формата CSV / XLS.
• Экспорт диаграмм в формате PNG, SVG или PDF
• Высокоавтоматизированные рабочие процессы
Панель инструментов дает исчерпывающий обзор проблемы. Более того, она позволяет легко изображать различные разновидности данных, используя цвета, шрифты и формы.
Заключительное резюме
Были вкратце описаны некоторые из лучших инструментов визуализации данных. Эти инструменты помогут вам сделать вашу презентацию данных более умной и интерактивной, что позволит вам привлечь внимание целевой аудитории.
Если вам нужны только базовые диаграммы и вы ограничены в средствах, то у вас есть множество вариантов, включая Leaflet, Chart.js, Highcharts и другие подобные инструменты.
Однако, если вам требуются расширенные функции и у вас приличный бюджет, вы можете попробовать более надежные и популярные инструменты визуализации данных и бизнес-аналитики, такие как Databox, Tableau, Datawrapper, Zoho Analytics и другие. Эти инструменты подходят, как для средних, так и для крупных предприятий.
Независимо от того, используете ли вы устройства на операционных системах Apple, Microsoft Windows или даже Android, эти инструменты помогут вам извлечь необработанные данные из нескольких баз данных и представить их в простой форме.
Подборка ссылок на тему визуализации данных и ссылки на представленные в статье продукты:
столбиковая диаграмма/bar chart — Infographer
Сегодня поделюсь с вами приложением Mekko Graphics для PowerPoint, которое на себе проверила компания Tetrapack (спасибо Саше К. за наводку).
Ребята прорисовали порядка 20 видов графиков, необходимых для бизнес презентаций. Многие из них и так доступны в Excel и Power Point, кроме пожалуй трех. Вот из-за них я и публикую этот обзор.
Marimekko chart
Это график с двумя осями с единственным отличием от стандартного Bar Chart — основания столбиков могут быть разными по размеру.
В итоге, вы можете показывать на одном листе такие вещи, которые раньше были недоступны.
Пример на графике: по горизонтали — виден размер брендов Nike, Reebok, Adidas, и т.д.
В это же время, по вертикали можно еще и продемонстрировать долю продаж компании на разных рынках (в США и за пределами).
Польза Marimekko в том, что без него, пользуясь стандартными инструментами, пришлось бы делать 2 графика вместо одного.
Только меня немного задевает что они приписывают себе авторство этого чарта, хотя, названия для такого графика я и правда ранее не встречала.
Cascade\Waterfall (Водопад)
Этот график позволяет показать составные части. Обычно мы строим такое, чтобы показать из каких сегментов мы ожидаем рост в следующем году.
Такое можно построить и в Excel, но приходится достраивать и делать невидимой нижнюю часть.
Вообщем не ново, а просто удобно, спасибо что сделали.
Диаграмма Ганта
График тоже не новый, но построить его сейчас можно только в MS Project, в других приложениях его нет.
Используется чаще всего в проектном менеджменте при иллюстрации различных стадий проекта, которые идут в параллели, показывает какие ресурсы когда задействованы и что каждая последующая стадия зависит от предыдущей.
И ложка дегтя — хоть графики и полезные, но дизайном здесь вообще не пахнет. Такие же мерзкие цвета, как в Excel по умолчанию строит. Задачи выполняет, но глаз спотыкается. Бррр
Эти страшилки 🙂 можно купить за 499$ для индивидуального пользования. Честного говоря, необоснованно дорого, но надеюсь, что они окупают себя техподдержкой.
Лучшие JavaScript библиотеки за 2019 год для построения диаграмм
Вступление
По мере того, как увеличиваются объёмы и сбор данных, необходимость визуализации этих данных становится всё более актуальной. Разработчики ищут способы объединять миллионы записей баз данных в красивые диаграммы, чтобы пользователи могли быстро и интуитивно воспринимать информацию.
В течение последнего десятилетия технологии визуализации данных не прекращали совершенствоваться, и теперь нам доступны многие продвинутые библиотеки. В начале 2000-х годов генерация диаграмм преимущественно производилась на стороне сервера. Такие плагины, как Flash и Silverlight, предлагали больше интерактивности, но с большими затратами системных ресурсов, а также медленной скоростью загрузки и большой нагрузкой на батарею мобильного устройства.
С началом доминирования мобильных платформ такие плагины перестали поддерживаться крупными производителями. Разработчики были вынуждены перейти на открытые технологии, которые способны работать на любых платформах и на стороне клиента.
На данный момент, доминирующими технологиями визуализации данных являются JavaScript и SVG (Scalable Vector Graphics). Благодаря им с визуализацией диаграмм справляются любые браузеры без специальных плагинов. При этом диаграммы прекрасно отображаются даже при самом высоком разрешении, поддерживают анимацию и интерактивность. Я выбрал 9 наиболее интересных библиотек.
D3.js
Это большая и мощная графическая JavaScript библиотека. Она позволяет привязывать произвольные данные к объектной модели документа (DOM), а затем преобразовывать документ на основе этих данных.
D3 выходит далеко за рамки типичных библиотек для диаграмм. Она включает множество небольших технических модулей, например: оси, цвета, иерархии, контуры, плавность, полигоны и многое другое. Всё это создаёт сложности для её изучения.
Создать даже простую диаграмму может оказаться нелегко. Все элементы диаграммы, включая оси, должны быть определены явно. Есть множество примеров, как CSS можно использовать для стилизации элементов диаграмм. В этой библиотеке ничего не применяется автоматически. У вас есть отличная возможность проявить креативность и полностью контролировать каждый элемент. С другой стороны, это не лучший выбор, когда времени на проект совсем мало.
D3.js можно использовать как строительные блоки для других библиотек. Разработчики используют D3 совместно с такими решениями, как NVD3, чтобы упростить процесс.
D3.js является open source проектом и полностью бесплатна.
JSCharting
Библиотека поддерживает большое количество типов диаграмм, включая map, gantt, stock и другие, которые зачастую требуют подключение отдельных библиотек. JSCharting включает в себя карты всех стран мира и набор SVG иконок. Автономный пакет можно рендерить в любых chart-метках или в любом div элементе на странице. UI элементы также включены в пакет. Они позволяют создавать интерактивные диаграммы. Вы можете легко управлять данными или переменными визуализации в режиме реального времени и экспортировать диаграммы в форматы SVG, PNG, PDF и JPG.
Интерфейс библиотеки разделён на две части: выбор типа диаграммы и выбор её функций. После настройки внешнего вида вы получите понятную и аккуратную диаграмму.
Встроенные примеры настраиваются очень просто. Для этого используется объект конфигурации. Чтобы создать более сложную диаграмму потребуется задать несколько параметров свойств. Значения настроек в JSCharting по умолчанию установлены так, чтобы автоматически выбирались лучшие параметры.
В документации вы найдёте уроки и описание API. Многие свойства описаны с примером их использования.
Для некоммерческого и личного использования JS Charting бесплатна. Есть платная коммерческая лицензия, которая включает все типы диаграмм и продуктов.
Highcharts
Этой популярной библиотекой пользуются крупнейшие мировые компании. Диаграммы генерируются в SVG и в альтернативном формате VML для обратной совместимости вплоть до IE6/IE8. Библиотека демонстрирует довольно богатый набор функций, хотя визуально не отличается особой привлекательностью. В документации есть подробные уроки и инструкция оп API. Настраивать параметры диаграмм и API не сложно.
Библиотека Highcharts бесплатна для некоммерческого и личного использования. Чтобы использовать диаграммы типа stock, map и gantt, а также для коммерческого использования потребуется платная лицензия.
amCharts
В четвёртой версии библиотеки добавили мощный анимационный движок для работы с SVG.
Диаграммы выглядят очень приятно, при этом многие из них имеют графический интерфейс для настройки переменных в реальном времени. В документации вы найдёте уроки и полное описание API свойств.
Создание диаграмм в amCharts немного отличается от подхода на основе конфигурирования. Здесь используется более декларативный API. Для этого необходимо чуть больше кода для настройки диаграмм.
amCharts предлагает платную и бесплатную лицензии.
Google Charts
Google диаграммы — это мощный и простой в использовании инструмент.
В галерее представлено множество типов диаграмм, которые выглядят понятными и приятными глазу. Для каждого типа диаграмм вы найдёте уроки с примерами, код для использования функций и описание API.
Диаграммы настраиваются с помощью объекта конфигурации. Данные для диаграмм подключаются через класс DataTable. Их можно применять к любым диаграммам. Каждый тип диаграммы имеет уникальные параметры, о которых можно прочитать в документации по конкретным типам. Именование свойств стандартизировано, и многие параметры работают для всех типов.
Google charts — это бесплатный онлайн сервис, но имейте в виду, что вы не сможете хранить диаграммы локально.
ZingChart
ZingChart предлагает нам множество типов диаграмм и интеграцию с angular, react и другими фреймворками. В ZingChart сильный функционал и множество параметров для настройки. Сервис предлагает широкий выбор тем для стилизации с возможностью настройки.
Документация описывает все типы диаграмм, функционал и работу с API.
ZingChart использует параметры конфигурации для настройки диаграмм. В примерах есть множество параметров свойств, таких как стиль шрифта. В бесплатной версии ваши диаграммы будут содержать логотип ZingChart.
FushionCharts
FusionCharts существует уже много лет на рынке. Это надёжная и проверенная библиотека для визуализации диаграмм. Изначально это был плагин для Flash. FusionCharts поддерживает множество форматов данных, включая XML, JSON и JavaScript. Библиотека работает в современных браузерах и обратно совместима с IE6. Поддерживаются многие JavaScript фреймворки и серверные языки программирования.
На сайте вы найдёте большое количество примеров и документацию с подробным описанием API.
Диаграммы создаются относительно просто. Свойства конфигурации диаграмм сгруппированы по задачам и функциям. Список свойств может быть довольно длинным. Здесь много свойств для детальной настройки, например: {chartLeftMargin, showAlternateHGridColor }.
Бесплатная версия FusionCharts доступна только для личного использования. Ваши диаграммы будут содержать логотип FusionCharts. Также доступна платная лицензия для коммерческого использования.
KOOLCHART
Работа этой JavaScript библиотеки основана на элементе HTML 5 Canvas. KoolChart также позволяет работать с таблицами и картами. В новый релиз добавили больше интерактивных функций и обновили возможности стилизации. Использование canvas оправдано лучшей производительностью за счет растровых изображений.
В примерах используется строковый XML для настройки параметров диаграммы, что кажется менее практичным, чем другие подходы. Эти параметры выглядят как HTML5, но устанавливаются через строку JavaScript.
API и все свойства диаграмм хорошо задокументированы в 173 страничном мануале. Библиотека платная, но у вас есть пробный период в два месяца, чтобы ознакомиться с ней.
Chart.js
Это JavaScript библиотека с открытым исходным кодом, поддерживающая 8 типов диаграмм. Вся библиотека весит всего 60kb. Поддерживаемые типы диаграмм: линейчатые, гистограммы, области, лепестковые, круговые, пузырьковые, точечные и смешанные. Также поддерживается создание временного ряда. Для рендеринга используется элемент canvas. Chart.js поддерживает адаптивность при масштабировании и обратно совместима с IE9. Для работы с IE7 доступны Polyfills.
Визуально диаграммы довольно современны и позволяют использовать анимацию при первой прорисовке. Анимация в режиме реального времени выглядит плавной. Параметры диаграммы можно изменять, вызывая функцию update(), которая перерисовывает диаграмму.
Исходный код доступен в репозитории GitHub. Для создания и изменения диаграмм используются параметры конфигурации. Настройка API интуитивно понятна. Подробная документация включает в себя уроки, описание свойств API и фрагменты кода.
Chart.js — это библиотека с открытым исходным кодом. Она бесплатна для личного и коммерческого использования, но предлагает ограниченное число типов диаграмм.
Заключение
Экосистема JavaScript библиотек для диаграмм значительно изменилась за последнее десятилетие. Сегодня существует большое количество библиотек, которые отвечают самым разнообразным требованиям и предлагают сотни типов диаграмм. Большинство библиотек имеют бесплатную и пробную версии или предлагают встраивать логотип библиотеки. Перед покупкой вы можете ознакомиться с функционалом библиотек.
Большинство библиотек легко справляются с простыми наборами данных и статическими визуализациями. Но с визуализацией динамических данных в реальном времени не всё так гладко. Может потребоваться дополнительная настройка и упорядочивание элементов, чтобы диаграммы выглядели правильно. Но при визуализации динамических данных вся ручная настройка может пойти коту под хвост. Чтобы выбрать лучшее решение для ваших задач, я рекомендую протестировать несколько библиотек на реальных данных.
Перевод статьи Arthur Puszynski: These are the best JavaScript chart libraries for 2019
великолепных примеров Chart.js, которые вы можете использовать на своем веб-сайте
Хотите увидеть классные примеры Chart.js? Боже, у нас их несколько. Но сначала давайте начнем с основ.
Графики и диаграммы обеспечивают быстрое и простое визуальное отображение статистики, облегчая перевод и сравнение информации. Хорошо представленный график или диаграмма могут сделать ваш сайт более привлекательным.
Размещение хорошей диаграммы на вашем веб-сайте может быть достигнуто с помощью Chart.js. Это библиотека скриптов визуализации данных.
Создание графиков и визуализация данных может быть для вас первым делом. Возможно, вы тоже пытались это сделать и обнаружили, насколько сложно сделать это правильно.
Вот список примеров Chart.js для вставки в ваши проекты.
В Chart.js есть множество функциональных визуальных дисплеев, включая гистограммы, круговые диаграммы, линейные диаграммы и многое другое.
Диаграммы предлагают возможности точной настройки и настройки, которые позволяют преобразовывать наборы данных в визуально впечатляющие диаграммы.
Подробнее о Chart.js
Chart.js похож на Google Charts или Chartist, предоставляя обширную библиотеку сценариев для визуализации данных JavaScript.
Он доступен на GitHub , , так что это библиотека с открытым исходным кодом, поддерживаемая сообществом.
Скрипты в библиотеке Chart.js доступны для использования JavaScript. После копирования сценарии могут быть вложены в HTML-элемент
Есть также варианты использования диаграмм в интерфейсных фреймворках, таких как React, Vue и Angular.
Все диаграммы в библиотеке адаптивны, что означает, что они могут отображаться в окнах разного размера. Они идеально масштабируются как на небольших мобильных экранах, так и на дисплеях больших устройств.
Наряду с отзывчивостью диаграммы обеспечивают хорошую производительность рендеринга во всех современных браузерах. Это означает, что независимо от того, как средство просмотра отображает ваши диаграммы, они будут быстро доступны и хорошо видны.
Доступные примеры Chart.js:
- Гистограммы — варианты включают в себя вертикальные, горизонтальные, многоосевые, составные и составные группы. Линейные диаграммы
- — варианты включают базовую, многоосевую, ступенчатую и интерполяцию. Также поставляется с вариантами различных стилей линий, стилей точек и размеров точек для полной настройки.
- Радарные карты
- Круговая диаграмма
- Пончиковые диаграммы
- Пузырьковые диаграммы
- Точечные диаграммы
- Полярная карта
Диаграммы нескольких типов можно комбинировать для наложения информации в разных форматах.
Различные модификации стиля диаграммы также можно найти в библиотеке, включая параметры масштаба, легенды и всплывающей подсказки.Это позволяет вам настроить визуализацию данных в соответствии с потребностями проекта и вашими личными предпочтениями.
Лучшие примеры Chart.js
PoC Живое обновление Chart.js
Пользовательский градиент Chart.js
В этом примере Chart.js показано, как использовать и реализовать настраиваемый градиент с помощью Chart.js. Он также использует трюк с заполнением, чтобы избежать уменьшения высоты графика во время загрузки страницы.
Chart.js-plugin-annotation песочница
Этот пример отлично подходит для рисования прямоугольника с помощью диаграммы.js библиотека аннотаций.
Chart.js — режим наложения — умножение
Это режим наложения холста, многократно примененный к диаграмме Chart.js с градиентом.
SVG Пончиковая диаграмма с анимацией и всплывающей подсказкой
Это легкий плагин jQuery, специализирующийся на рисовании кольцевых диаграмм.
Chart.js образец
Это образец Chart.js, отображающий красивую графику, но при этом простой и легкий в использовании.
Удалить подсказку и диаграмму легенды.js
Это позволяет удалить всплывающую подсказку и легенду в Chart.js с глобальными параметрами.
Medium — красивая, отзывчивая приборная панель
Chart.js — График температуры
Эта линейная диаграмма Chart.js содержит прозрачные точки и настраиваемые метки.
Chart.js Полярная карта
Отчет о продажах— Темная версия
Используемые плагины можно найти на панели выполнения.js / chart.js
Chart.js — динамическое обновление диаграммы с помощью запросов Ajax
Chart.js — Радарная диаграмма, тени, пользовательское наведение
Этот радар Chart.js включает тени и настраиваемый эффект наведения.
Chart.js 1.x Пример
Линейный график
Это все, что вам нужно для создания минимального линейного графика в Chart.js. Просто вставьте его в где-нибудь в вашем
после того, как вы объявите HTML5В качестве альтернативы вы можете использовать диспетчер пакетов для загрузки библиотеки. Для получения дополнительной информации см. Руководство по началу работы.
Просто, а? Теперь без лишних слов, давайте посмотрим, что может предложить Chart.js.
График
Это все, что вам нужно для создания минимального линейного графика в Chart.js. Просто поместите его в где-нибудь в вашем после , когда вы объявляете холст HTML5.
var ctx = document.getElementById ('myChart'). GetContext ('2d');
var myChart = new Chart (ctx, {
тип: 'линия',
данные: {
ярлыки: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
наборы данных: [{
label: 'яблоки',
данные: [12, 19, 3, 17, 6, 3, 7],
backgroundColor: "rgba (153,255,51,0.4)"
}, {
label: 'апельсины',
данные: [2, 29, 5, 5, 2, 3, 10],
backgroundColor: "rgba (255,153,0,0.4)"
}]
}
});
См. Диаграмму Pen 2 — Line от SitePoint (@SitePoint) на CodePen.
Если этот код выглядит сложным, не волнуйтесь! Все примеры Chart.js по большей части соответствуют указанному выше формату, поэтому вам нужно изучить его только один раз. Давайте пойдем по очереди, чтобы понять, что происходит.
var ctx = document.getElementById ("myChart"). GetContext ('2d');
Эта строка получает ссылку на элемент , который мы создали ранее, а затем вызывает для него метод getContext . Метод getContext возвращает объект, который предоставляет методы и свойства для рисования на холсте.Мы сохраняем это в переменной с именем ctx .
var myChart = new Chart (ctx, {
тип: 'линия',
данные:
});
Здесь мы создаем объект диаграммы. Я исключил данные на мгновение, чтобы сосредоточиться на свойстве type , которое определяет тип диаграммы, которую мы хотим. Конструктор new Chart () в Chart.js принимает два параметра:
- Либо ссылка на элемент
, на котором будет отображаться диаграмма, либо ссылка на его 2-мерный контекст рисования (здесь мы используем 2-й контекст).Независимо от того, что вы используете, по соглашению Chart.js он называетсяctx. - Литерал объекта, содержащий данные и параметры конфигурации, которые Chart.js будет использовать для построения вашей диаграммы. Необходимые свойства:
типиданные. В нашем примеретип- «линия», потому что нам нужен линейный график.данных- это данные, которые вы использовали для заполнения диаграммы.
Chart.js использует расположение массива для определения положения на графике, поэтому первая точка «яблок» будет иметь значение «12», вторая - «19» и так далее.Добавить новые строки так же просто, как добавить новый объект с меткой и данными .
Наконец, я установил цвет фона rgba для каждого набора данных, чтобы сделать его более привлекательным.
Чтобы узнать больше о линейных диаграммах с Chart.js, ознакомьтесь с документами
СоветPro: нажатие на любую из легенд диаграмм («Яблоки» и «Апельсины» здесь) переключит этот конкретный набор данных. Это работает для всех типов диаграмм.
Гистограмма
Гистограммы - это (в основном) просто линейные диаграммы, которые выглядят немного иначе.Изменив одну строку в нашем предыдущем примере, мы можем создать гистограмму.
тип: «линия»
Спо:
тип: «бар»
Да, это действительно так просто.
См. Pen 2. Гистограмма от SitePoint (@SitePoint) на CodePen.
Полную документацию по гистограммам можно найти здесь.
Вот полный код этого примера:
var ctx = document.getElementById ("myChart"). GetContext ('2d');
var myChart = new Chart (ctx, {
тип: 'бар',
данные: {
ярлыки: ["M", "T", "W", "R", "F", "S", "S"],
наборы данных: [{
label: 'яблоки',
данные: [12, 19, 3, 17, 28, 24, 7]
}, {
label: 'апельсины',
данные: [30, 29, 5, 5, 20, 3, 10]
}]
}
});
Радарные карты
Радарные диаграммы - мой любимый тип, и опять же, они относятся к тому же семейству, что и линейные и гистограммы.Радарные диаграммы - это просто линейные диаграммы с радиальной осью X, противоположной прямой. Чтобы получить быструю радарную карту, измените:
тип: «бар»
Спо:
тип: "радар"
Потому что именно так Chart.js раскатывает .
К сожалению, результат немного некрасивый, и его очень трудно прочитать. Столбчатые диаграммы не пересекаются, поэтому лучше использовать сплошные цвета. Это не относится к радиолокационным картам, которые действительно перекрывают друг друга. Мы можем приспособиться к этому, обновив значение непрозрачности нашего backgroundColor и добавив borderColor .
{
label: 'яблоки',
backgroundColor: "rgba (179,11,198, .2)",
borderColor: "rgba (179,11,198,1)",
данные: [12, 19, 3, 17, 6, 3, 7]
}
Это добавляет четкий фон и позволяет визуализировать перекрытие.
См. Pen 3. Радарные диаграммы от SitePoint (@SitePoint) на CodePen.
Чтобы узнать больше о радиолокационных картах, ознакомьтесь с документацией.
Вот полный код из этого примера:
var ctx = document.getElementById ("myChart");
var myChart = new Chart (ctx, {
тип: 'радар',
данные: {
ярлыки: ["M", "T", "W", "T", "F", "S", "S"],
наборы данных: [{
label: 'яблоки',
backgroundColor: "rgba (153,255,51,0.4) ",
borderColor: "rgba (153,255,51,1)",
данные: [12, 19, 3, 17, 28, 24, 7]
}, {
label: 'апельсины',
backgroundColor: "rgba (255,153,0,0.4)",
borderColor: "rgba (255,153,0,1)",
данные: [30, 29, 5, 5, 20, 3, 10]
}]
}
});
Полярная карта
Полярные диаграммы дают каждой точке данных равное радиальное пространство. Сегменты с большими значениями отходят дальше от центра графика. Вот полярная диаграмма для нашего набора данных яблок .
См. Перо 4. Полярные диаграммы от SitePoint (@SitePoint) на CodePen.
Как обычно, указание, что это полярная диаграмма, может быть выполнено с помощью одной линии. Смена:
тип: "радар"
Спо:
тип: 'polarArea'
Но полярная область - это первая из рассмотренных мною диаграмм, которую нельзя использовать для сравнения двух наборов данных. В предыдущих примерах использовались разные способы сопоставления двух массивов одинаковой длины, тогда как полярная диаграмма (и круговая диаграмма, которая будет рассмотрена далее) визуализируют только одну группу чисел.
Вот полный код этого примера:
var ctx = document.getElementById ("myChart"). GetContext ('2d');
var myChart = new Chart (ctx, {
тип: 'polarArea',
данные: {
ярлыки: ["M", "T", "W", "T", "F", "S", "S"],
наборы данных: [{
фоновый цвет: [
"# 2ecc71",
"# 3498db",
"# 95a5a6",
"# 9b59b6",
"# f1c40f",
"# e74c3c",
"# 34495e"
],
данные: [12, 19, 3, 17, 28, 24, 7]
}]
}
});
Единственный новый код - это массив backgroundColor .Каждый цвет соответствует элементу данных того же индекса.
Чтобы узнать больше о диаграммах полярных областей, ознакомьтесь с документацией.
Круговые и пончиковые диаграммы
Вы, наверное, уже догадались об этой части. Смена:
тип: 'polarArea'
Спо:
тип: «пирог»
Свойство типа является ключом к Chart.js. Помните, как легко было перейти от линейной диаграммы к линейчатой и радарной диаграмме? Ну, полярные, круговые и кольцевые диаграммы одинаково взаимозаменяемы.С этим единственным изменением мы можем перейти от полярной диаграммы к круговой.
См. Pen 5. Круговая диаграмма от SitePoint (@SitePoint) на CodePen.
А для кольцевой диаграммы:
тип: «пирог»
Спо:
тип: «пончик»
См. Pen 6. Пончиковая диаграмма от SitePoint (@SitePoint) на CodePen.
Чтобы узнать больше о круговых и кольцевых диаграммах, ознакомьтесь с документацией.
Вот полный код круговой диаграммы:
var ctx = document.getElementById ("myChart"). getContext ('2d');
var myChart = new Chart (ctx, {
тип: 'пирог',
данные: {
ярлыки: ["M", "T", "W", "T", "F", "S", "S"],
наборы данных: [{
фоновый цвет: [
"# 2ecc71",
"# 3498db",
"# 95a5a6",
"# 9b59b6",
"# f1c40f",
"# e74c3c",
"# 34495e"
],
данные: [12, 19, 3, 17, 28, 24, 7]
}]
}
});
Кольцевые диаграммы имеют интересное свойство, называемое cutoutPercentage , которое определяет размер центрального отверстия.Чтобы погрузиться в это, мне сначала нужно показать вам кое-что о Chart.js, которое я проигнорировал, чтобы помочь вам быстрее разобраться с основными типами диаграмм.
Настройка Chart.js
До сих пор в каждом примере мы использовали формат:
var myChart = new Chart (ctx, {
тип:
данные:
});
Но есть третье свойство под названием options . Он умещается справа под данными .
var myChart = new Chart (ctx, {
тип:
данные:
параметры:
});
Теперь, когда вы знакомы с основами Chart.js, пора рассмотреть некоторые уловки, доступные с опциями .
Заголовки
С помощью этого набора параметров легко добавить заголовок к любой диаграмме Chart.js. Нативные названия прекрасны, но стоит отметить, что они в основном статичны и неизменны. Это будет иметь значение, когда мы попытаемся добавить пользовательские события через минуту.
варианты: {
заглавие: {
дисплей: правда,
текст: 'Пользовательский заголовок диаграммы'
}
}
Отверстие от пончика
Свойство cutoutPercentage имеет значение от 0 до 50.Круговые диаграммы - это просто кольцевые диаграммы с вырезом Процент от 0.
варианты: {
cutoutPercentage: 10,
}
Гистограммы укладки
Если вы предпочитаете, чтобы ваши столбчатые диаграммы были сложены, просто добавьте следующий набор параметров в код штриховой диаграммы:
варианты: {
напольные весы: {
yAxes: [{
сложены: правда
}]
}
}
У каждого типа диаграммы есть множество вариантов, в которых вы можете покопаться. Я призываю вас сделать это.
Обработка событий
Как упоминалось ранее, нажатие на легенду переключит набор данных, связанный с этой конкретной легендой. Давайте дополним это нашей собственной функциональностью:
var original = Chart.defaults.global.legend.onClick;
Chart.defaults.global.legend.onClick = function (e, legendItem) {
original.call (this, e, legendItem);
};
Этот код сохраняет ссылку на функцию onClick элемента легенды в переменной с именем original .Затем он заменяет эту функцию нашей собственной адаптированной версией. Параметр e , который мы передаем ему, является ссылкой на событие щелчка, вызвавшее срабатывание функции, а параметр legendItem - это ссылка на легенду, по которой был выполнен щелчок. Когда мы закончим добавление нашего собственного кода, мы вызываем исходную функцию, задавая значение и это значение и передавая ожидаемые параметры. В результате выполняется действие по умолчанию для нажатия на легенду (переключение набора данных).
Другими словами, теперь мы можем упаковать любые функции, которые захотим, поверх вызова onClick () , если мы поместим его выше original.call () .
A Конкретный пример
Давайте дополним наш предыдущий код, чтобы, когда пользователь нажимает на легенду, заголовок внизу диаграммы обновляется автоматически.
Мы меняем только заголовок, но вы можете добавить любой функционал, какой захотите. Например, на панели мониторинга могут быть столбцы ежедневных значений яблок, и апельсинов, .Панель управления также может динамически обновляться в зависимости от состояния вашей диаграммы с помощью настраиваемого обратного вызова. Создавать интерактивные данные легко с Chart.js.
Вот код
var labels = {
"яблоки": правда,
"апельсины": правда
};
var caption = document.getElementById ("подпись");
var update_caption = function (легенда) {
метки [legend.text] = legend.hidden;
var selected = Object.keys (метки) .filter (function (key) {
вернуть метки [ключ];
});
var text = selected.длина ? selected.join ("&"): "ничего";
caption.innerHTML = "На приведенной выше диаграмме отображается" + текст;
};
Как видите, мы используем литерал объекта, чтобы отслеживать статус легенд. Мы также используем свойства legend.text и legend.hidden , чтобы обновить его состояние. Функция фильтра вернет любой из ключей объекта, значение которого равно истинному , которые мы используем для создания нашей подписи.
См. Pen 7. Гистограмма с настраиваемым onClick () от SitePoint (@SitePoint) на CodePen.
Chart.js 2.0 против 1.0
В этой статье использован синтаксис Chart.js 2.0. Chart.js 2.0 является относительно новым для 2016 года. Наиболее очевидное различие между 2.0 и 1.0 заключается в том, как объявлять диаграммы.
1,0
var LineChartDemo = новый график (ctx) .Line (
);
2,0
var myChart = new Chart (ctx, {
тип: 'линия',
данные:
параметры:
}
Версия 1.0 фокусируется на использовании цепочки функций для создания диаграммы определенного типа с последующей передачей данных и параметров.Версия 2.0 меняет это положение, позволяя пользователю создать общий объект диаграммы, а затем передать его тип, а также данные и параметры. Второй подход больше соответствует философии Chart.js, будучи максимально модульным и индивидуальным. Стоит отметить, что Chart.js 2.0 имеет обратную совместимость и по-прежнему поддерживает синтаксис 1.0.
Еще одна ключевая особенность Chart.js 2.0 - поддержка мобильных устройств. Диаграммы теперь можно масштабировать для соответствия экранам мобильных устройств и обрабатывать события касания в мобильных браузерах. При нынешнем распространении мобильных устройств это обязательная функция для веб-сайтов в 2016 году.
Еще одна новая функция версии 2.0, которую мы использовали в этом руководстве, - это title . У диаграмм теперь есть интегрированные заголовки, которые будут взаимодействовать с диаграммой, к которой они прикреплены.
Полный список обновлений можно найти в примечаниях к выпуску 2.0.0.
Заключение
Chart.js идеально подходит для быстрого прототипирования простых диаграмм. Мы рассмотрели восемь основных типов диаграмм: line , bar , radar , polarArea , pie и donut .Эти разнообразные диаграммы охватывают наиболее распространенные способы визуализации данных, а это означает, что Chart.js, вероятно, единственная графическая библиотека, которая вам понадобится для вашего следующего проекта.
Если вы хотите узнать больше о Chart.js, я настоятельно рекомендую документы, которые вы можете найти на веб-сайте Chart.js. Если у вас есть какие-либо вопросы или комментарии, я хотел бы услышать их ниже.
Начало работы | 📈 vue-chartjs
vue-chartjs - это оболочка для Chart.js во Vue. Это позволяет легко создавать повторно используемые компоненты диаграммы.
Введение
vue-chartjs позволяет без особых проблем использовать Chart.js внутри Vue. Он идеально подходит для людей, которым нужно как можно быстрее создавать простые графики и запускать их.
Он абстрагирует базовую логику, но предоставляет объект Chart.js, чтобы обеспечить максимальную гибкость.
Установка
NPM
Вы можете установить vue-chartjs поверх пряжи или npm . Однако вам также необходимо добавить диаграмму .js как зависимость от вашего проекта, потому что Chart.js является peerDependency. Таким образом, вы можете полностью контролировать управление версиями Chart.js .
СОВЕТ
Если вы используете vue 1.x, используйте устаревший тег . Однако версия Vue 1 больше не поддерживается.
yarn add vue-chartjs @ legacy
Browser
Вы также можете использовать vue-chartjs непосредственно в браузере через CDN.
Сначала добавьте диаграмму .js , а затем добавьте сценарий vue-chartjs .
Интеграция
Каждый тип диаграммы, доступный в Chart.js , экспортируется как именованный компонент и может быть импортирован как таковой. Эти компоненты являются обычными компонентами Vue, однако вам нужно расширить его .
Идея vue-chartjs заключается в предоставлении простых в использовании компонентов с максимальной гибкостью и расширяемостью. Для этого вам необходимо создать собственный компонент Chart и расширить его с помощью предоставленных компонентов vue-chartjs .
Таким образом, методы и логика компонентов диаграммы объединяются в ваш собственный компонент диаграммы.
Создание вашей первой диаграммы
Во-первых, вам нужно импортировать базовую диаграмму и расширить ее. Это дает больше гибкости при работе с разными данными. Вы можете инкапсулировать свои компоненты и использовать реквизиты для передачи данных, или вы можете ввести их непосредственно внутри компонента. Однако ваш компонент не может использоваться повторно.
Вы можете импортировать весь пакет или каждый модуль по отдельности.Затем вам нужно использовать либо extends: , либо миксинов: [] . После этого в хуке connected () вызовите this.renderChart () . Это создаст ваш экземпляр диаграммы.
TIP
Вы можете использовать extends: Bar или миксинов: [Bar]
Метод this.renderChart () предоставляется компонентом Bar и принимает два параметра: оба являются объектами . Первый - это данные вашей диаграммы, а второй - объект параметров.
Ознакомьтесь с официальной документацией Chart.js, чтобы увидеть структуру объекта, которую вам необходимо предоставить.
Однофайловые компоненты Vue
Большинство примеров в документации основаны на файлах JavaScript, а не на файлах Если вы хотите взглянуть на веб-сайты проектов, вы можете взглянуть на https://www.chartjs.org/: и https: //valor-software.com/ng2-charts/: Кроме того, мы собираемся использовать некоторые классы CSS Bootstrap, поэтому давайте также установим Bootstrap: Чтобы включить файл CSS Bootstrap также не забудьте добавить следующую строку кода в файл styles.css : Чтобы иметь возможность использовать директивы ng2-charts в нашем приложении Angular, нам нужно обязательно добавить ChartsModule . Поэтому сначала добавьте следующий оператор импорта в app.module.ts: Кроме того, не забудьте добавить ChartsModule к массиву импорта декоратора @NgModule : .vue . Это связано с тем, что в большинстве случаев вам понадобится только блок $ npm install bootstrap @import '~ bootstrap / dist / css / bootstrap.min.css ';
import {ChartsModule} from 'ng2-charts'; : [
9000 базовая структура HTML (включая навигацию по вкладкам) в приложении .component.html :
BrowserModule,
RouterModule.forRoot (маршруты),
ChartsModule
], также
< / div>Мы используем классы CSS Bootstrap для реализации структуры навигации.Кроме того, элемент
добавлен в качестве заполнителя для активированного компонента маршрутизации. Соответствующая конфигурация роутера будет добавлена в наше приложение позже.Давайте реализуем первый пример, в котором мы собираемся реализовать гистограмму. В нашем приложении Angular создадим еще один компонент:
$ ng gc my-bar-chartЭта команда добавляет четыре новых файла в наш проект:
- src / app / my-bar-chart / my- гистограмма.component.html
- src / app / my-bar-chart / my-bar-chart.component.ts
- src / app / my-bar-chart / my-bar-chart.component.css
- src / app / my-bar-chart / my-bar-chart.component.spec.ts
Откройте my-bar-chart.component.html и замените содержимое этого файла следующим код:
[datasets] = "barChartData"
[labels] = "barChartLabels"
[options] = "barChartOptions"
[legend] = "barChartLegend"
[chartType ] = "barChartType">
Здесь мы используем директиву baseChart , которая добавляется к элементу холста.Кроме того, атрибуты наборов данных , подписи , параметры , legend и chartType привязаны к членам класса, которые добавляются к реализации класса MyBarChartComponent в my-bar-chart-component.ts :
import {Component, OnInit} from '@ angular / core'; @ Component ({
selector: 'app-my-bar-chart',
templateUrl: './my-bar-chart.component.html' ,
styleUrls: ['./my-bar-chart.component.css ']
})
экспортный класс MyBarChartComponent реализует OnInit {constructor () {} public barChartOptions = {
scaleShowVerticalLines: false,
responseive: true
}; public barChartLabels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
общедоступный barChartType = 'bar';
общедоступный barChartLegend = true; public barChartData = [
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
{data: [28, 48, 40, 19, 86, 27, 90] ], этикетка: 'Series B'}
]; ngOnInit () {
}}Давайте создадим второй новый компонент в нашем приложении Angular, чтобы увидеть пример кольцевой диаграммы в действии:
$ ng gc my-donut-chartИ снова HTML-код, который необходимо быть вставленным в my-donut-chart.component.html :
[data] = "doughnutChartData"
[labels] = "doughnutChartLabels"
[chartType] = "doughnutChartType">
В my-donut-chart-component.ts необходимо вставить следующий код TypeScript:
import {Component, OnInit} from '@ angular / core'; @ Component ({
selector: 'app-my-donut -chart ',
templateUrl:' ./my-doughnut-chart.component.html ',
styleUrls: [' ./my-doughnut-chart.component.css ']
})
экспортный класс MyDoughnutChartComponent реализует OnInit {public doughnutChartLabels = [' Sales Q1 ',' Sales Q2 ',' Sales Q3 ', «Продажи Q4»];
public doughnutChartData = [120, 150, 180, 90];
общедоступный doughnutChartType = 'пончик'; constructor () {} ngOnInit () {
}}В третьем примере мы создаем пример радиолокационной диаграммы. Мы снова начинаем с создания нового компонента:
$ ng g c my-radar-chartВот HTML-код, который необходимо вставить в my-radar-chart.component.html :
[datasets] = "radarChartData"
[labels] = "radarChartLabels"
[chartType] = "radarChartType">
И соответствующий код TypeScript в my-radar-chart.component.ts :
import {Component, OnInit} from '@ angular / core'; @ Component ({
selector: 'app-my-radar-chart' ,
templateUrl: './my-radar-chart.component.html',
styleUrls: ['./my-radar-chart.component.css ']
})
класс экспорта MyRadarChartComponent реализует OnInit {public radarChartLabels = [' Q1 ',' Q2 ',' Q3 ',' Q4 '];
public radarChartData = [
{данные: [120, 130, 180, 70], метка: '2017'},
{данные: [90, 150, 200, 45], метка: '2018'}
];
public radarChartType = 'радар'; constructor () {} ngOnInit () {
}}Последний компонент используется для добавления примера круговой диаграммы в наше приложение:
$ ng gc my-pie-chartHTML-код в my-pie -Диаграмма.component.html :
[data] = "pieChartData"
[labels] = "pieChartLabels"
[chartType] = "pieChartType">
В my-pie-chart.component.ts :
import {Component, OnInit} from '@ angular / core'; @ Component ({
selector: 'app-my-pie-chart',
templateUrl: ' ./my-pie-chart.component.html ',
styleUrls: [' ./my-pie-chart.component.css ']
})
класс экспорта MyPieChartComponent реализует OnInit {public pieChartLabels = [' Sales Q1 ', «Продажи 2 квартал», «Продажи 3 квартал», «Продажи 4 квартал»];
общедоступный pieChartData = [120, 150, 180, 90];
общедоступный pieChartType = 'пирог'; constructor () {} ngOnInit () {
}}Наконец, нам нужно убедиться, что конфигурация маршрутизатора на месте.Прежде всего, в app.module.ts должен быть доступен следующий оператор импорта:
import {Routes, RouterModule} from '@ angular / router';Конфигурация маршрутизатора включает маршруты для наших четырех компонентов плюс один маршрут по умолчанию, который подключен к MyBarChartComponent .
const routes: Routes = [
{path: 'bar-chart', component: MyBarChartComponent},
{path: 'donut-chart', component: MyDoughnutChartComponent},
{path: 'radar-chart', component: MyRadarChartComponent},
{путь: 'круговая диаграмма', компонент: MyPieChartComponent},
{путь: '**', компонент: MyBarChartComponent}
];Для активации конфигурации маршрутизатора RouterModule необходимо добавить в массив import следующим образом:
import: [
BrowserModule,
RouterModule.forRoot (routes),
ChartsModule
],В результате теперь вы должны увидеть следующее приложение в браузере.
Гистограмма:
Кольцевая диаграмма:
Радарная диаграмма:
Круговая диаграмма:
Chart.js - одна из самых популярных доступных библиотек построения диаграмм JavaScript. Используя Chart.js, вы можете легко добавлять адаптивные диаграммы на свой веб-сайт. Сочетание возможностей Chart.js с Angular - очень распространенный вариант использования. Библиотека ng2-charts содержит директивы Angular, что упрощает включение Chart.js в одностраничном веб-приложении.
Этот пост был впервые опубликован на сайте CodingTheSmartWay.com .
Мастер Angular (Angular 2+, включая Angular 6) и создавайте потрясающие реактивные веб-приложения на основе Angular.js
Go To Course…Отказ от ответственности: этот пост содержит партнерские ссылки, что означает если вы нажмете на одну из ссылок на продукт, я получу небольшую комиссию. Это помогает поддержать этот блог!
Пример строки js диаграммы - JSFiddle
Редактор макета
Классический Столбцы Нижние результаты Правильные результаты Вкладки (столбцы) Вкладки (строки)
Консоль
Консоль в редакторе (бета)
Очистить консоль при запуске
Общие
Номера строк
Обернуть линии
Отступ с табуляцией
Подсказка по коду (автозаполнение) (бета)
Размер отступа:2 пробела 3 пробела 4 пробела
Ключевая карта:По умолчанию: Sublime TextEMACS
Размер шрифта:По умолчаниюBigBiggerJabba
Поведение
Код автозапуска
Только код автозапуска, который проверяет
Код автосохранения (натыкается на версию)
Автоматически закрывать HTML-теги
Автоматически закрывающие скобки
Проверка действующего кода
Выделите совпадающие теги
Заглушки
Показывать панель шаблонов реже
Создайте диаграмму, используя chartJs в VueJs
В этом руководстве рассказывается, как создавать впечатляющие диаграммы, которые помогут нам понять данные или информацию в полном смысле этого слова.Я покажу вам, как создавать обширные диаграммы в приложении Vue.js 2+, используя Chart.js и плагин vue-chartjs.
Визуализация данных в настоящее время является важным аспектом, и диаграммы - лучшее средство для представления информации для всех. Графики обрабатывают наши энцефалоны, чтобы понимать данные более легко и быстро, чем текстовую информацию. Наиболее важную информацию можно легко просканировать с помощью диаграмм, что невозможно в текстовой форме данных.Vue.js - это гибкий JavaScript-фреймворк для создания удобных интерфейсов-утилизаторов. Мы воспользуемся Chart.js и vue-chartjs для демонстрации примеров диаграмм.
Итак, приступим.
Установите Vue Project с Vue CLI
Во-первых, мы должны установить Vue CLI, используя приведенную ниже команду:
npm install -g @ vue / cliДалее мы можем установить проект Vue:
vue создать приложение vue-chart-js-appVue CLI задает следующий вопрос:
#? Выберите предустановку: выберите функции вручную #? Проверьте функции, необходимые для вашего проекта: Babel, Router, CSS Pre-processors, Linter. #? Использовать режим истории для роутера? (Требуется правильная настройка сервера для отката индекса в производственной среде) Да #? Выберите препроцессор CSS (модули PostCSS, Autoprefixer и CSS поддерживаются по умолчанию): Sass / SCSS (с dart-sass) #? Выберите конфигурацию линтера / форматтера: Basic #? Выберите дополнительные функции ворса: Плотность при сохранении #? Где вы предпочитаете размещать конфиг для Babel, ESLint и т. Д.? В package.json #? Сохранить это как пресет для будущих проектов? (г / н) №Попасть в проект:
компакт-диск vue-chart-js-appЗапускаем проект и проверяем в браузере:
npm run serveУстановите плагины Chart.js и vue-chartjs
Запустите команду, чтобы установить плагины vue-chartjs и Chart.js.
# npm npm установить vue-chartjs chart.js --save # пряжа пряжа добавить диаграмму vue-chartjs.jsChart.js - мощная, простая, но гибкая библиотека JavaScript с открытым исходным кодом для разработчиков программного обеспечения. Это помогает в создании различных потрясающих диаграмм с использованием холста HTML5. Это хорошо известная библиотека, и вы можете определить ее популярность, увидев более 48,1 тыс. Звезд на GitHub.
С помощью Chart.js можно рисовать следующие диаграммы:
- Строка
- Бар
- Пончик
- Пирог
- Радар
- Полярная зона
- Пузырь
- Разброс
vue-chartjs предоставляет оболочку для Chart.js в Vue. Это позволяет создавать повторно используемые компоненты диаграммы для отображения полезной информации, которую можно легко понять в графическом виде. Этот плагин хорошо совместим с Vue.js 2.x +.
Создание и настройка компонентов диаграмм
На этом этапе мы создадим компоненты и представления для примеров диаграмм.
Создайте указанные ниже файлы в папке src / views :
- Line.vue => (Home.vue)
- Bar.vue
- Пончик.vue
- Pie.vue
- Radar.vue
- PolarArea.vue
- Bubble.vue
- Scatter.vue
Затем создайте указанную ниже папку src / components :
- LineChart.vue
- BarChart.vue
- DoughnutChart.vue
- PieChart.vue
- RadarChart.vue
- PolarAreaChart.vue
- BubbleChart.vue
- ScatterChart.vue
Создание и настройка маршрутов в Vue
Теперь нам нужно создать и настроить маршруты в нашем приложении Vue.Эти маршруты позволят нам отображать диаграммы из компонента, который мы создали выше.
Откройте файл router / index.js и замените существующий код следующим кодом.
импортировать Vue из 'vue' импортировать VueRouter из 'vue-router' импортировать главную из "../views/Home.vue" Vue.use (VueRouter) const routes = [ { дорожка: '/', name: 'Дом', компонент: Главная }, { путь: '/ бар', имя: 'Бар', компонент: () => import ('../views/Bar.vue ') }, { путь: '/ пончик', имя: 'Пончик', компонент: () => import ('../ views / Doughnut.vue') }, { путь: '/ pie', имя: 'Пирог', компонент: () => import ('../ views / Pie.vue') }, { путь: '/ радар', название: 'Радар', компонент: () => import ('../ views / Radar.vue') }, { путь: '/ полярная-область', имя: 'PolarArea', компонент: () => import ('../views/PolarArea.vue ') }, { путь: '/ пузырь', имя: 'Пузырь', компонент: () => import ('../ views / Bubble.vue') }, { путь: '/ scatter', name: 'Scatter', компонент: () => import ('../ views / Scatter.vue') } ] const router = new VueRouter ({ режим: 'история', база: process.env.BASE_URL, маршруты }) экспорт маршрутизатора по умолчаниюОткройте src / App.vue и замените текущий код заданным кодом удара.
<шаблон>Линия |Панель |Пончик |Пирог |Радар |Полярная область |Пузырь |Разброс Мы включили навигацию в Vue, определив
router-linkвнутри файла src / App.vue .Директива
будет отображать связанный вид для конкретного компонента Chart.Пример линейной диаграммы Vue
Теперь создадим линейный график. Перейдите к components / LineChart.vue и поместите следующий код.
<сценарий> импортировать {Line} из 'vue-chartjs' экспорт по умолчанию { расширяется: линия, данные () { возвращаться { chartData: { ярлыки: [«Баболь», «Кабанатуан», «Тэгу», «Иерусалим», «Фэрфилд», «Нью-Йорк», «Гангток», «Буэнос-Айрес», «Хафар аль-Батин», «Идлиб»], наборы данных: [ { label: 'Линейная диаграмма', данные: [600, 1150, 342, 6050, 2522, 3241, 1259, 157, 1545, 9841], fill: false, borderColor: '# 2554FF', backgroundColor: '# 2554FF', borderWidth: 1 } ] }, параметры: { напольные весы: { yAxes: [{ клещей: { beginAtZero: true }, gridLines: { display: true } }], xAxes: [{ gridLines: { display: false } }] }, легенда: { display: true }, отзывчивый: правда, keepAspectRatio: false } } }, mount () { это.renderChart (this.chartData, this.options) } }Затем откройте просмотров / Home.vue . Здесь мы отобразим линейную диаграмму, поэтому добавьте тег линейной диаграммы и импортируйте компонент LineChart в представление.
Пример столбчатой диаграммы<шаблон><сценарий> импортировать LineChart из '@ / components / LineChart' экспорт по умолчанию { составные части: { LineChart } }Пример линейной диаграммы в Vue
в Vue
Чтобы создать гистограмму, откройте компонентов / BarChart.vue и поместите следующий код.
<сценарий> импортировать {Bar} из 'vue-chartjs' экспорт по умолчанию { расширяется: Бар, данные() { возвращаться { chartData: { ярлыки: [«2015-01», «2015-02», «2015-03», «2015-04», «2015-05», «2015-06», «2015-07», «2015-08» , «2015-09», «2015-10», «2015-11», «2015-12» ], наборы данных: [{ label: "Гистограмма", borderWidth: 1, фоновый цвет: [ 'rgba (255, 99, 132, 0.2) ', 'rgba (54, 162, 235, 0.2)', 'rgba (255, 206, 86, 0.2)', 'rgba (75, 192, 192, 0,2)', 'rgba (153, 102, 255, 0.2)', 'rgba (255, 159, 64, 0.2)', 'rgba (255, 99, 132, 0,2)', 'rgba (54, 162, 235, 0.2)', 'rgba (255, 206, 86, 0.2)', 'rgba (75, 192, 192, 0,2)', 'rgba (153, 102, 255, 0.2)', 'rgba (255, 159, 64, 0.2) ' ], цвет границы: [ 'rgba (255,99,132,1)', 'rgba (54, 162, 235, 1)', 'rgba (255, 206, 86, 1)', 'rgba (75, 192, 192, 1)', 'rgba (153, 102, 255, 1)', 'rgba (255, 159, 64, 1)', 'rgba (255,99,132,1)', 'rgba (54, 162, 235, 1)', 'rgba (255, 206, 86, 1)', 'rgba (75, 192, 192, 1)', 'rgba (153, 102, 255, 1)', 'rgba (255, 159, 64, 1)' ], pointBorderColor: '# 2554FF', данные: [12, 19, 3, 5, 2, 3, 20, 3, 5, 6, 2, 1] }] }, параметры: { напольные весы: { yAxes: [{ клещей: { beginAtZero: true }, gridLines: { display: true } }], xAxes: [{ gridLines: { display: false } }] }, легенда: { display: true }, отзывчивый: правда, keepAspectRatio: false } } }, mount () { это.renderChart (this.chartData, this.options) } }Затем откройте файл views / Bar.vue . Здесь мы должны показать гистограмму, поэтому добавьте тег bar-chart внутри директивы шаблона и импортируйте компонент BarChart в представление.
<шаблон><сценарий> импортировать BarChart из '@ / components / BarChart' экспорт по умолчанию { составные части: { BarChart } }Пример гистограммы в Vue
Пример кольцевой диаграммы Vue
Чтобы создать кольцевую диаграмму, откройте компонентов / DoughnutChart.vue и добавьте следующий код.
<сценарий> импортировать {Donut} из 'vue-chartjs' экспорт по умолчанию { расширяется: пончик, данные () { возвращаться { chartData: { ярлыки: ["Баболь", "Кабанатуан", "Тэгу", "Иерусалим"], наборы данных: [{ borderWidth: 1, цвет границы: [ 'rgba (255,99,132,1)', 'rgba (54, 162, 235, 1)', 'rgba (255, 206, 86, 1)', 'rgba (75, 192, 192, 1)' ], фоновый цвет: [ 'rgba (255, 99, 132, 0.2) ', 'rgba (54, 162, 235, 0.2)', 'rgba (255, 206, 86, 0.2)', 'rgba (75, 192, 192, 0,2)', 'rgba (153, 102, 255, 0.2)', ], данные: [1000, 500, 1500, 1000] }] }, параметры: { легенда: { display: true }, отзывчивый: правда, keepAspectRatio: false } } }, mount () { это.renderChart (this.chartData, this.options) } }Затем откройте файл views / Doughnut.vue . Здесь мы должны показать кольцевую диаграмму, поэтому добавьте тег кольцевой диаграммы внутри директивы шаблона и импортируйте компонент DoughnutChart в представление.
<шаблон><сценарий> импортировать DoughnutChart из '@ / components / DoughnutChart' экспорт по умолчанию { составные части: { DoughnutChart } }Пример кольцевой диаграммы в Vue
Пример круговой диаграммы в Vue
Чтобы создать круговую диаграмму, откройте компонентов / PieChart.vue и добавьте следующий код.
<сценарий> импортировать {Pie} из 'vue-chartjs' экспорт по умолчанию { расширяется: пирог данные () { возвращаться { chartData: { ярлыки: ["Италия", "Индия", "Япония", "США",], наборы данных: [{ borderWidth: 1, цвет границы: [ 'rgba (255,99,132,1)', 'rgba (54, 162, 235, 1)', 'rgba (255, 206, 86, 1)', 'rgba (75, 192, 192, 1)' ], фоновый цвет: [ 'rgba (255, 99, 132, 0.2) ', 'rgba (54, 162, 235, 0.2)', 'rgba (255, 206, 86, 0.2)', 'rgba (75, 192, 192, 0,2)', ], данные: [1000, 500, 1500, 1000] }] }, параметры: { легенда: { display: true }, отзывчивый: правда, keepAspectRatio: false } } }, mount () { это.renderChart (this.chartData, this.options) } }Затем откройте файл views / Pie.vue . Здесь мы должны показать круговую диаграмму, поэтому добавьте тег круговой диаграммы внутри директивы шаблона и импортируйте компонент PieChart в представление.
<шаблон><сценарий> импортировать PieChart из '@ / components / PieChart' экспорт по умолчанию { составные части: { Круговая диаграмма } }Пример круговой диаграммы в Vue
Пример диаграммы радара
Чтобы создать диаграмму радара, откройте компонентов / RadarChart.vue и добавьте следующий код.
<сценарий> импортировать {Radar} из 'vue-chartjs' экспорт по умолчанию { расширяется: Радар, данные () { возвращаться { chartData: { ярлыки: [ "Баболь", г. "Кабанатуан", "Тэгу", "Иерусалим", "Фэрфилд", "Нью-Йорк", "Гангток", "Буэнос айрес", "Хафар Аль-Батин", «Идлиб» ], наборы данных: [ { label: "Радарная карта", borderWidth: 1, backgroundColor: 'rgba (54, 162, 235, 0.2) ', данные: [ 32127289, г. 24724027, г. 25820412, г. 23685667, г. 25644258, г. 22433220, г. 22966210, г. 22743184, г. 21880515, г. 21543111 ] } ] }, параметры: { отзывчивый: правда, keepAspectRatio: false } } }, mount () { это.renderChart (this.chartData, this.options) } }Затем откройте файл views / Radar.vue . Здесь мы должны показать радарную диаграмму, поэтому добавьте тег radar-chart внутри директивы шаблона и импортируйте компонент RadarChart в представление.
<шаблон><сценарий> импортировать RadarChart из '@ / components / RadarChart' экспорт по умолчанию { составные части: { RadarChart } }Пример радарной диаграммы в Vue
Пример диаграммы полярных областей
Чтобы создать диаграмму полярной области, откройте компонентов / PolarAreaChart.vue и добавьте следующий код.
<сценарий> импортировать {PolarArea} из vue-chartjs экспорт по умолчанию { расширяется: PolarArea, данные () { возвращаться { chartData: { ярлыки: ["Розовый", "Синий", "Желтый", "Зеленый", "Пурпурный"], наборы данных: [ { label: "Полярная карта", borderWidth: 1, фоновый цвет: [ 'rgba (255, 99, 132, 0.2) ', 'rgba (54, 162, 235, 0.2)', 'rgba (255, 206, 86, 0.2)', 'rgba (75, 192, 192, 0,2)', 'rgba (153, 102, 255, 0.2)', ], данные: [8, 14, 12, 7, 20] } ] }, параметры: { отзывчивый: правда, keepAspectRatio: false } } }, mount () { это.renderChart (this.chartData, this.options) } }Затем откройте файл views / PolarArea.vue . Здесь мы должны показать диаграмму PolarArea, поэтому добавьте тег полярной диаграммы внутри директивы шаблона и импортируйте компонент PolarAreaChart в представление.
<шаблон><сценарий> импортировать PolarAreaChart из '@ / components / PolarAreaChart' экспорт по умолчанию { составные части: { PolarAreaChart } }Пример диаграммы полярных областей в Vue
Пример пузырьковой диаграммы
На этом этапе мы создадим диаграмму пузырьковой области, поэтому откройте компонентов / BubbleChart.vue и добавьте приведенный ниже код.
<сценарий> импортировать {Bubble} из 'vue-chartjs' экспорт по умолчанию { расширяется: пузырь данные() { возвращаться { chartData: { наборы данных: [{ label: "Данные о населении", borderWidth: 1, borderColor: '# 2554FF', backgroundColor: '# 2554FF', данные: [{ х: 6, y: 3, r: 15 }, { х: 3, г: 12, r: 4 }, { х: 5, y: 15, r: 10 }, { х: 3, г: 12, r: 8 }, { х: 4, y: 5, r: 20 }, { х: 2, y: 6, r: 3 }, { х: 4, y: 9, r: 11 }, { х: 5, г: 10, r: 6 } ] }] }, параметры: { легенда: { display: true }, отзывчивый: правда, keepAspectRatio: false } } }, mount () { это.renderChart (this.chartData, this.options) } }Затем перейдите к файлу views / Bubble.vue . Здесь нам нужно отобразить пузырьковую диаграмму, поэтому добавьте тег пузырьковой диаграммы внутри директивы шаблона vue и импортируйте компонент BubbleChart в представление.
<шаблон><сценарий> импортировать BubbleChart из '@ / components / BubbleChart' экспорт по умолчанию { составные части: { BubbleChart } }Пример пузырьковой диаграммы в Vue
Пример диаграммы
На этом этапе мы создадим диаграмму пузырьковой области, поэтому откройте компонентов / ScatterChart.vue и добавьте приведенный ниже код.
<сценарий> импортировать {Scatter} из 'vue-chartjs' экспорт по умолчанию { расширяется: Scatter, данные() { возвращаться { chartData: { наборы данных: [{ label: "Данные о населении", borderWidth: 1, borderColor: '# 2554FF', backgroundColor: '# 2554FF', данные: [{ х: 6, y: 3, r: 15 }, { х: 3, г: 12, r: 4 }, { х: 5, y: 15, r: 10 }, { х: 3, г: 12, r: 8 }, { х: 4, y: 5, r: 20 }, { х: 2, y: 6, r: 3 }, { х: 4, y: 9, r: 11 }, { х: 5, г: 10, r: 6 } ] }] }, параметры: { легенда: { display: true }, отзывчивый: правда, keepAspectRatio: false } } }, mount () { это.renderChart (this.chartData, this.options) } }Затем перейдите к файлу views / Scatter.vue . Здесь нам нужно отобразить точечную диаграмму, поэтому добавьте тег точечной диаграммы внутри директивы шаблона vue и импортируйте компонент ScatterChart в представление.
<шаблон><сценарий> импортировать ScatterChart из '@ / components / ScatterChart' экспорт по умолчанию { составные части: { ScatterChart } }Пример точечной диаграммы в Vue
Надеюсь, вам понравилась эта статья.
Vue.js и Chart.js Пример API погоды
Недавно меня попросили добавить несколько необычных диаграмм и графиков на существующий веб-сайт WordPress. Раньше для решения подобной задачи моим оружием был либо jQuery, либо Angular.js, но я решил попробовать популярный Vue.js. Vue.js - это прогрессивный фреймворк javascript, что означает, что его очень легко добавить на существующий веб-сайт и начать работу. В этом руководстве я собираюсь начать с простого файла шаблона HTML и добавить Vue.js внизу в теге
Здесь мы загружаем Vue.js, Moment.js для форматирования даты и времени, Chart.js, Axios для выполнения наших запросов API и main.js, который будет содержать наш собственный код. Обратите внимание, что эти сценарии загружаются один за другим, что не идеально. Одним из преимуществ использования Vue CLI является возможность объединить все необходимые файлы JavaScript и оптимизировать загрузку, но у нас не всегда есть такая роскошь при работе со старыми веб-сайтами.
Использование Axios для получения данных о погоде из API
Первым шагом этого приложения является получение данных о погоде из API OpenWeatherMap. Я решил использовать 5-дневный прогноз, поскольку он доступен на бесплатном уровне. Вы можете бесплатно зарегистрироваться с OpenWeatherMap, чтобы получить свой собственный ключ приложения, который необходим в конце каждого запроса.
В нашем
main.jsмы инициализируем наше приложение Vue и создадим метод для получения наших данных.var app = new Vue ({ el: '#app', данные: { диаграмма: нуль, город: '', даты: [], темп: [], загрузка: ложь, с ошибкой: ложь }, методы: { getData: function () { это.loading = true; аксиомы .get ('https://api.openweathermap.org/data/2.5/forecast', { params: { q: this.city, единицы: 'имперские', appid: 'Здесь ваш ключ OpenWeatherMap' } }) .then (response => { console.log (ответ); }) .catch (error => { console.log (ошибка); this.errored = true; }) .finally (() => (this.loading = false)); } } });Метод
getDataсодержит запрос Axios, который мы будем делать.Единственное отсутствующее поле, которое нам нужно, этоthis.city, которое нам понадобится из формы. Давайте подключим наш HTML к этому приложению Vue.Пример Vue.js с Chart.js <ссылка rel = "таблица стилей" href = "https: // путь к стеку.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css " целостность = "sha384-Smlep5jCw / wG7hdkwQ / Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm / e9B" crossorigin = "анонимный" />Загрузка...Как видите, большая часть HTML осталась неизменной. Единственное, что нужно добавить, - это различные атрибуты
v-. Давайте быстро перейдем к изменениям.Эта строка связывает нашу форму с нашим методом
getDataи запускается всякий раз, когда форма отправляется.Действие отправки формы по умолчанию - перезагрузить страницу, поэтому.preventдействует как событие.preventDefault ().Это связывает поле ввода с
data.cityнашего приложения Vue и затем может быть доступно в методеgetDataчерезthis.city. Вот как мы меняем город в зависимости от ввода пользователя.Детали
v-showне являются обязательными, но они улучшают пользовательский интерфейс.Он покажет предупреждение о загрузке, когда приложение находится в состоянии загрузки, и скроет его после завершения загрузки после того, как запрос успешно получит данные.С этими деталями вы можете попробовать наш запрос. Введите город и отправьте форму. Откройте консоль, и вы должны увидеть журнал данных из API!
Форматирование данных для Chart.js
Как только мы получим наши данные, нам нужно будет организовать их в массивы для использования Chart.js. У нас будет массив дат для оси x и массив значений температуры для оси y.
В нашем
main.jsзаменитеconsole.log (response)следующим:. Затем (response => { this.dates = response.data.list.map (list => { return list.dt_txt; }); this.temps = response.data.list.map (list => { вернуть list.main.temp; }); })Это устанавливает наши
data.datesиdata.tempsв сопоставленные массивы. Обратите внимание, что мы используем стрелочную функцию в.then (), которая связываетthis.датыиthis.tempsправильно. Если вы не можете использовать стрелочные функции, обязательно добавьте.bind (this)после вашей функции.Отображение данных с помощью Chart.js
После форматирования данных мы можем инициализировать новую диаграмму и вставить данные. При работе с Chart.js или любой другой библиотекой диаграмм большая часть работы заключается в правильном форматировании диаграммы. Я настоятельно рекомендую просмотреть документацию Chart.js и проверить их образцы, чтобы увидеть различные доступные варианты.В зависимости от данных, которые вы наносите на диаграмму, всплывающие подсказки и ось X или Y, возможно, потребуется настроить для отображения правильных единиц для данных.
Я просмотрел и отформатировал параметры Chart.js уже для этой демонстрации, не стесняйтесь просматривать параметры и вносить любые необходимые изменения.
Наш последний файл
main.jsтеперь выглядит так:var app = new Vue ({ el: '#app', данные: { диаграмма: нуль, город: '', даты: [], темп: [], загрузка: ложь, с ошибкой: ложь }, методы: { getData: function () { это.loading = true; if (this.chart! = null) { this.chart.destroy (); } аксиомы .get ('https://api.openweathermap.org/data/2.5/forecast', { params: { q: this.city, единицы: 'имперские', appid: 'fd3150a661c1ddc90d3aefdec0400de4' } }) .then (response => { this.dates = response.data.list.map (list => { return list.dt_txt; }); this.temps = response.data.list.map (list => { список возврата.main.temp; }); var ctx = document.getElementById ('myChart'); this.chart = новая диаграмма (ctx, { тип: 'линия', данные: { метки: this.dates, наборы данных: [ { label: 'Сред. Темп ', backgroundColor: 'rgba (54, 162, 235, 0.5)', borderColor: 'rgb (54, 162, 235)', fill: false, данные: this.temps } ] }, параметры: { заглавие: { дисплей: правда, текст: 'Температура с диаграммой.js ' }, подсказки: { обратные вызовы: { label: function (tooltipItem, data) { var label = data.datasets [tooltipItem.datasetIndex] .label || ''; if (label) { метка + = ':'; } метка + = Math.floor (tooltipItem.yLabel); этикетка возврата + '° F'; } } }, напольные весы: { xAxes: [ { тип: 'время', время: { единица: 'час', displayFormats: { час: 'M / DD @ hA' }, tooltipFormat: 'MMM.DD @ hA ' }, scaleLabel: { дисплей: правда, labelString: 'Дата / время' } } ], yAxes: [ { scaleLabel: { дисплей: правда, labelString: 'Температура (° F)' }, клещей: { обратный вызов: функция (значение, индекс, значения) { возвращаемое значение + '° F'; } } } ] } } }); }) .catch (error => { console.log (ошибка); this.errored = true; }) .finally (() => (this.loading = false)); } } });Большая часть диаграммы состоит из опций, которые на самом деле никогда не меняются после того, как они установлены по вашему вкусу. Части, которые действительно изменяются, - это
data.labelsиdata.datasets. Вы можете видеть, что мы вставляем наши массивыthis.datesиthis.tempsв эти области диаграммы.Мы также установили
this.диаграммана вновь созданную диаграмму. Обратите внимание на это новое условие прямо перед запросом Axios:if (this.chart! = Null) { this.chart.destroy (); }Используется, когда запрашивается город более одного раза, он уничтожит старую диаграмму перед созданием новой, чтобы избежать перекрытия данных.
Вот и все! Приложение теперь получает данные на основе введенного вами города и отображает температуры.