Содержание король
. Мы все слышали или читали это предложение, которое выражает то, насколько хороший текст может стимулировать конверсию благодаря влиянию на поисковые системы. Однако, хотя текст отлично подходит для поисковых систем, иногда люди могут лучше понять концепцию, посмотрев на изображение или диаграмму. Например, если ваш веб-сайт специализируется на опросах, описание опроса важно, но диаграмма, которая обобщает данные опроса, гораздо более эффективна для ваших пользователей.
В этой статье я познакомлю вас с библиотекой JavaScript Chart.js, которая использует элемент canvas HTML5 для рисования диаграмм на странице. После краткого обзора библиотеки я также покажу вам два примера использования этой библиотеки.
Что такое Chart.js?
Chart.js — это библиотека JavaScript, которая позволяет рисовать различные типы диаграмм с помощью элемента canvas HTML5. Поскольку он использует canvas , вы должны включить полифилл для поддержки старых браузеров. Один из предложенных автором — ExplorerCanvas , так что вы можете придерживаться его.
Библиотека не имеет зависимостей, и ее вес очень низок, поскольку ее размер составляет ~ 11 КБ при минимизации, конкатенации и обслуживании gzip. Однако вы можете еще больше уменьшить размер, если не используете все шесть основных типов диаграмм, включая только те модули, которые вам нужны. Итак, предположим, что вам нужно только нарисовать гистограмму на своем веб-сайте, вы можете включить ядро и модуль гистограммы и сохранить пропускную способность для ваших пользователей.
Еще одна интересная особенность Chart.js заключается в том, что графики являются адаптивными, поэтому они будут адаптироваться в зависимости от доступного пространства. Наконец, в отличие от многих библиотек, которые вы можете найти в Интернете, он предоставляет обширную и понятную документацию, которая упрощает использование основных функций, а также расширенных параметров.
В следующем разделе мы увидим, как вы можете получить и включить его на свой сайт.
Начало работы с Chart.js
Первым шагом к использованию этой библиотеки является ее загрузка и включение на страницу, где вы планируете нарисовать одну или несколько диаграмм. Для загрузки Chart.js у вас есть две возможности. Во-первых, скачать библиотеку, посетив ее репозиторий GitHub . Вторая возможность — использовать Bower, менеджер зависимостей для Интернета, выполнив следующую команду:
bower install chartjs --save
После загрузки вы должны включить файл (ы) JavaScript на своей странице. В следующем примере я предполагаю, что вы хотите включить полную версию:
<script src="path/to/Chart.js"></script>
Пожалуйста, обратите внимание на заглавную букву файла. Необычно, что библиотека пишется с заглавной буквы, поэтому при первом использовании вы можете понять, почему вы получаете ошибку 404.
После этого библиотека предоставит все свои методы через глобальную переменную с именем Chart . Имея файл JavaScript, мы готовы создать наш первый график. Для этого вам нужно создать экземпляр нового объекта Chart , передав ему 2d контекст canvas вы хотите использовать на своей странице. Чтобы понять эту концепцию, предположим, что на вашей странице есть следующий элемент, который будет использоваться для размещения диаграммы:
<canvas id="skills"></canvas>
Если вы хотите создать круговую диаграмму, вы должны написать следующие утверждения:
var context = document.getElementById('skills').getContext('2d'); var skillsChart = new Chart(context).Pie(data);
где data которые не определены в этом примере, являются переменной, содержащей данные для отображения.
Теперь, когда вы знаете, что нужно для начала работы с Chart.js, пришло время посмотреть некоторые примеры. Для краткости я буду использовать полную версию библиотеки в моих примерах, но вы можете найти все модули в папке «src».
Создание круговой диаграммы с помощью Chart.js
В этом разделе я покажу вам, как создать круговую диаграмму, которая показывает навыки гипотетического разработчика (я включу Java, поэтому разработчик не может быть мной!).
Как вы можете легко догадаться, первым шагом является включение элемента canvas используемого для рисования круговой диаграммы:
<canvas id="skills" width="300" height="300"></canvas>
Затем нам нужно создать данные, используемые для построения графика. В реальном случае данные каким-то образом предоставляются с сервера, но сейчас мы будем использовать фиксированный пример без использования сервера. Для круговой диаграммы мы должны передать массив объектов, каждый из которых может содержать несколько свойств. Однако, чтобы его можно было легко использовать на первый взгляд, он должен содержать для каждого объекта значение, которое вы хотите показать, цвет фрагмента круговой диаграммы и метку, как показано ниже:
var pieData = [ { value: 25, label: 'Java', color: '#811BD6' }, { value: 10, label: 'Scala', color: '#9CBABA' }, { value: 30, label: 'PHP', color: '#D18177' }, { value : 35, label: 'HTML', color: '#6AE128' } ];
Наконец, как объяснялось в предыдущем разделе, нам нужно получить 2d контекст холста и создать экземпляр диаграммы:
var context = document.getElementById('skills').getContext('2d'); var skillsChart = new Chart(context).Pie(pieData);
Объединение всех фрагментов, перечисленных в этом разделе, приводит к следующему выводу, также доступному как JSfiddle :
Рисование гистограммы
Следующий пример, который мы создадим, — это гистограмма, показывающая, как число клиентов гипотетической компании изменилось в 2014 году по сравнению с 2010 годом в некоторых странах. Как и в предыдущем примере, мы должны поместить элемент canvas на страницу, где мы хотим показать диаграмму:
<canvas id="clients" width="500" height="400"></canvas>
Далее нам нужно создать данные этой фальшивой компании:
var barData = { labels: ['Italy', 'UK', 'USA', 'Germany', 'France', 'Japan'], datasets: [ { label: '2010 customers #', fillColor: '#382765', data: [2500, 1902, 1041, 610, 1245, 952] }, { label: '2014 customers #', fillColor: '#7BC225', data: [3104, 1689, 1318, 589, 1199, 1436] } ] };
Как вы можете видеть, для гистограммы вы должны предоставить объект, содержащий свойство с именем labels котором указаны имена экземпляров, которые вы хотите сравнить. В нашем примере такими примерами являются Италия, Великобритания, США, Германия, Франция и Япония. Кроме того, мы должны предоставить свойство dataset которое определяет массив объектов, каждый из которых содержит данные, которые мы хотим сравнить. В нашем примере мы сравниваем 2014 и 2010 годы, поэтому нам понадобятся только два объекта. Внутри этих объектов мы должны указать метку, чтобы дать визуальную подсказку о том, что представляют собой данные, значения для каждого объекта, указанные в качестве значений свойства data , и, необязательно, цвет панели.
После этого мы готовы создать график:
var context = document.getElementById('clients').getContext('2d'); var clientsChart = new Chart(context).Bar(barData);
Объединение всех фрагментов, описанных в этом разделе, приводит к следующему выводу, также доступному как JSfiddle :
Вывод
В этой статье я познакомил вас с Chart.js, библиотекой JavaScript для удобного создания красивых диаграмм. Как вы уже видели, библиотека очень проста, и в этой статье я показал несколько примеров. Chart.js также предоставляет вам несколько вариантов, которые я не рассмотрел, но которые вы можете узнать, прочитав официальную документацию .
Вы когда-нибудь использовали эту библиотеку? Как прошел ваш опыт? Если нет, вы использовали другой?