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, и пока вы там, обязательно взгляните на более сложный пример, например, на диаграмму разброса.