Эта статья включена в нашу антологию, современный 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 id="myChart"></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 . Метод getContext возвращает объект, который предоставляет методы и свойства для рисования на холсте. Мы храним это в переменной с именем ctx .
var myChart = new Chart(ctx, { type: 'line', data: // array of line data goes here });
Здесь мы создаем объект диаграммы. Я на мгновение исключил данные, чтобы сосредоточиться на свойстве type , которое определяет желаемый тип диаграммы. new Chart() конструктор Chart.js new Chart() принимает два параметра:
- Либо ссылка на элемент
</canvas><canvas>, на котором будет отображаться диаграмма, либо ссылка на его 2D-контекст рисования (здесь мы используем 2D-контекст). Независимо от того, что вы используете, соглашение Chart.js должно называть егоctx. - Литерал объекта, содержащий данные и параметры конфигурации, которые Chart.js будет использовать для построения диаграммы. Обязательными свойствами являются
typeиdata. В нашем примереtypeявляется «линия», потому что нам нужен линейный график.data— это данные, которые вы использовали для заполнения диаграммы.
Chart.js использует расположение массива для определения положения на графике, поэтому первая точка «яблок» будет иметь значение «12», вторая — «19» и т. Д. Добавление новых строк так же просто, как добавление нового объекта с label и 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: //chart type, data: // chart data });
Но есть третье свойство, называемое options . Это вписывается прямо под data .
var myChart = new Chart(ctx, { type: //chart type, data: // chart data, options: // chart options });
Теперь, когда вы знакомы с основами 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) { // Insert your custom functionality here original.call(this, 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( //data here, //options here );
2,0
var myChart = new Chart(ctx, { type: 'line', data: //data here, options: //options here }
Версия 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 . Если у вас есть какие-либо вопросы или комментарии, я хотел бы услышать их ниже.