Max Home IndustryChart.js 2 был выпущен с новыми типами диаграмм и улучшенной расширяемостью. Простота использования — одна из ключевых особенностей этой библиотеки с открытым исходным кодом, и здесь мы посмотрим, как она сравнивается с d3.js при создании простой гистограммы.
Библиотека JavaScript Chart.js — это проект с открытым исходным кодом, созданный Ником Дауни в 2013 году. Теперь проект переместился из исходного репозитория GitHub Ника в один из собственных: github.com/chartjs/Chart.js, где в настоящее время он очень активен. .
После динамического запуска и проникновения в сцену визуализации JavaScript казалось, что проект Chart.js зашел в тупик, судя по низкому трафику или, лучше сказать, отсутствию коммитов в его репозитории GitHub.
Ситуация снова начала улучшаться примерно в июне 2015 года, с заметным всплеском активности фиксации на графике, причем наибольшая активность была отмечена в первом квартале 2016 года, что привело к выпуску версии 2.0.0-alpha.
Оглядываясь назад, можно сказать, что Chart.js версии 1.0 стал долгожданным дополнением к клубу библиотек визуализации JavaScript, где он выделился, отказавшись от самого популярного в то время стандарта SVG -vector drawing- для нового HTML Canvas-растрового рисунка. — один.
Тем не менее, Chart.js не имел расширенных возможностей фреймворка, такого как d3.js. Он был ограничен только шестью типами диаграмм — линейными, столбчатыми, радарными, круговыми, полярными и кольцевыми, но его простота использования и гибкость были двумя аспектами, которые преобладали и выделяли его среди остальных библиотек.
Версия 2.0, которая представляет собой капитальный ремонт, предлагает совершенно иное предложение. Он дополняет уже установленный аспект простоты использования и фокусируется на расширяемости. Он добавляет больше типов диаграмм, включая составные диаграммы с областями / столбиками и пузырьковыми диаграммами, а также возможность их смешивать.
Он также добавляет типы осей диаграммы времени и журнала и поддерживает несколько осей. Легенды теперь поддерживаются для всех типов диаграмм, они могут быть размещены в любом месте на холсте и по умолчанию поддерживают переключение видимости данных. Анимация — еще одна новая функция с переходами при изменении данных, обновлении цветов и добавлении наборов данных. Он также разработан, чтобы быть отзывчивым и готовым к работе с мобильными устройствами, с диаграммами, ярлыками и легендами, которые масштабируются для соответствия любому размеру экрана и поддерживает сенсорные события. Также есть анимация.
Версия 2.1.0 была выпущена на прошлой неделе и объявила о различных исправлениях ошибок, а также представила тип горизонтальных полос и возможность создавать плагины, которые вписываются в жизненный цикл диаграммы.
Говоря о расширяемости, плагины уже начали собираться, например, Chart.Zoom.js, плагин масштабирования и панорамирования, выпущенный всего несколько дней назад, и react-chartjs2, компонент React для Chart.js, выпущенный примерно и в те временные рамки.
Если этого было недостаточно, уже есть новый предложенный коммит для версии 2.1.1, который содержит одно или два исправления незначительных ошибок.
Как уже было сказано, простота использования и низкая кривая обучения — основные преимущества Chart.js перед альтернативными библиотеками, такими как d3.js. Это демонстрируется тем, насколько тривиально просто в Chart.js создать аналог простой гистограммы d3:
Chart.js: var myChart = new Chart (ctx, {
тип: ‘бар’,
данные: {
ярлыки: [«Красный», «Синий», «Желтый», «Зеленый», «Пурпурный», «Оранжевый»],
наборы данных: [{
label: ‘Кол-во голосов’,
данные: [12, 19, 3, 5, 2, 3]
}]
},
параметры: {
напольные весы: {
yAxes: [{
клещей: {
beginAtZero: true
}
}]
}
}
})
и d3.js:
var margin = {сверху: 20, справа: 20, снизу: 70, слева: 40},
width = 600 — margin.left — margin.right,
height = 300 — margin.top — margin.bottom;
// Разбираем дату / время
varparseDate = d3.time.format («% Y-% m»). parse;
var x = d3.scale.ordinal (). rangeRoundBands ([0, ширина], .05);
var y = d3.scale.linear (). range ([высота, 0]);
var xAxis = d3.svg.axis ()
.scale (x)
.orient («низ»)
.tickFormat (d3.time.format («% Y-% m»));
var yAxis = d3.svg.axis ()
.scale (y)
.orient («слева»)
.ticks (10);
var svg = d3.select («body»). append («svg»)
.attr («ширина», ширина + поле слева + поле справа)
.attr («высота», высота + margin.top + margin.bottom)
.append («г»)
.attr («преобразовать»,
«translate (» + margin.left + «,» + margin.top + «)»);
d3.csv («bar-data.csv», function (error, data) {
data.forEach (function (d) {
d.date = parseDate (d.date);
d.value = + d.value;
});
x.domain (data.map (функция (d) {return d.date;}));
y.domain ([0, d3.max (данные, функция (d) {return d.value;})]);
svg.append («г»)
.attr («класс», «ось x»)
.attr («преобразовать», «перевести (0,» + высота + «)»)
.call (xAxis)
.selectAll («текст»)
.style («текст-якорь», «конец»)
.attr («dx», «-.8em»)
.attr («dy», «-.55em»)
.attr («преобразовать», «повернуть (-90)»);
svg.append («г»)
.attr («класс», «ось y»)
.call (ось y)
.append («текст»)
.attr («преобразовать», «повернуть (-90)»)
.attr («у»; 6)
.attr («dy», «.71em»)
.style («текст-якорь», «конец»)
.text («Значение ($)»);
svg.selectAll («полоса»)
.data (данные)
.enter (). append («прямоугольник»)
.style («заливка», «стальной синий»)
.attr («x», функция (d) {return x (d.date);})
.attr («ширина», x.rangeBand ())
.attr («y», функция (d) {return y (d.value);})
.attr («высота», функция (d) {высота возврата — y (d.value);});
});
С другой стороны, возможности d3.js для расширенной визуализации данных позволяют ему выполнять что-то вроде OMG Particles II, поэтому всегда используйте правильный инструмент для правильной работы.
Больше примеров, которые помогут вам начать работу с Chart.js, можно найти в его основном репозитории на GitHub, и пока вы там, обязательно взгляните на более сложный пример, например, на диаграмму разброса.