Простое построение графиков с помощью Chart.js


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


Добавить комментарий