Имея данные повсюду, мы должны знать, как представить их графически, чтобы лучше (и быстрее) понять, что они нам говорят. Одной из наиболее распространенных техник визуализации данных являются столбчатые диаграммы, и я хочу показать вам, как легко создавать интерактивные диаграммы с помощью JavaScript.
Столбчатая диаграмма – это простой, но эффективный способ отображения данных, когда вам нужно сравнить значения. Из этого руководства вы научитесь создавать его различные вариации — базовые однорядные, многорядные, столбчатые диаграммы с накоплением и столбцы со стопроцентным накоплением — и применять эффективные настройки еще в нескольких строках кода JS.
Как фанат крикета, я внимательно следил за чемпионатом мира ICC среди мужчин T20, который проходил в прошлом месяце в Австралии. Я решил использовать некоторые данные, связанные с чемпионатом, для иллюстративных визуализаций. Столбчатые диаграммы JavaScript, построенные в этом руководстве, позволят нам изучить статистику отбивания мяча, а точнее количество пробежек, набранных 10 лучшими игроками с битой на турнире. Давайте учиться весело!
1. Базовая столбчатая диаграмма JS
Базовую столбчатую диаграмму JavaScript можно очень легко построить всего за четыре шага. Позвольте мне показать вам, что нужно сделать на каждом из этих шагов, а также объяснить каждую строку кода, которую я напишу.
- Создайте контейнер.
- Включите файлы сценария.
- Подготовьте данные.
- Напишите код визуализации.
А. Создайте контейнер
Прежде всего, вам нужно настроить место для вашей диаграммы.
Если у вас уже есть веб-страница, на которую вы хотите ее поместить, откройте файл HTML, а если нет, создайте его с нуля. Затем добавьте HTML-элемент блочного уровня и присвойте ему идентификатор. Кроме того, установите его ширину, высоту и другие параметры стиля в соответствии с вашими требованиями.
Я создал очень простую HTML-страницу, добавил элемент <div> с идентификатором «контейнера» и указал его ширину и высоту как 100%, чтобы полученная столбчатая диаграмма на основе JS заполнила всю страницу:
<html>
<head>
<title>JavaScript Column Chart</title>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
B. Включить файлы сценариев
Самый простой способ быстро создать интерактивную диаграмму для Интернета — использовать одну из существующих библиотек построения диаграмм JavaScript. Они представляют собой наборы предварительно написанного кода для построения диаграмм, что позволяет создавать визуализации данных с минимальными дополнительными усилиями по кодированию.
Шаги для создания гистограммы в основном одинаковы, независимо от конкретной библиотеки. Что бы вы ни выбрали, включите его на свою веб-страницу, указав его файл(ы) JavaScript в теге <script> в разделе <head>. Затем добавьте еще один тег <script> в любом месте раздела <head> или <body> — там будет размещен код гистограммы.
В этом уроке, чтобы проиллюстрировать процесс, я буду использовать AnyChart. Это легкая JS-библиотека графиков с подробной документацией и множеством примеров, бесплатная для некоммерческих целей. Итак, я включаю его базовый модуль:
<html>
<head>
<title>JavaScript Column Chart</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// Put your JS column charting code here.
</script>
</body>
</html>
С. Подготовьте данные
Затем подготовьте данные, которые вы хотите визуализировать в столбчатой диаграмме.
Я собрал общую статистику пробежек для 10 лучших бомбардиров чемпионата мира ICC Men’s T20 от ESPNcricinfo и сопоставил их в простом многомерном массиве JavaScript. (Конечно, вы можете использовать другой формат данных, например JSON, XML, CSV и т. д.)
[ ["Virat Kohli", "296", "India"], ["Max O'Dowd", "242", "Netherlands"], ["Suryakumar Yadav", "239", "India"], ["JD Butler", "225", "England"], ["Kusal Mendis", "223", "Sri Lanka"], ["Sikandar Raza", "219", "Zimbabwe"], ["Pathum Nissanka", "214", "Sri Lanka"], ["AD Hales", "212", "England"], ["Lorkan Tucker", "204", "Ireland"], ["Glenn Phillips", "201", "New Zealand"] ]
D. Напишите код визуализации
Почва подготовлена, игроки готовы, жеребьевка сделана, и теперь пришло время начать матч! Создание гистограммы с помощью библиотеки диаграмм JS похоже на попадание шестерки в крикет — меньше усилий и больше вознаграждения. Позвольте мне показать вам, как запустить его, написав несколько строк кода JavaScript.
Первое, что я делаю, это добавляю функцию anychart.onDocumentReady() в свой тег <script> в разделе ‹body›. Все остальное пойдет в эту функцию.
<script>
anychart.onDocumentReady(function() {
// The following JS code to create a column chart.
});
</script>
Затем я создаю экземпляр гистограммы JS, используя встроенную функцию, и добавляю серию с подготовленными данными.
// create a column chart var chart = anychart.column(); // create a data series var series = chart.column([ ["Virat Kohli", "296", "India"], ["Max O'Dowd", "242", "Netherlands"], ["Suryakumar Yadav", "239", "India"], ["JD Butler", "225", "England"], ["Kusal Mendis", "223", "Sri Lanka"], ["Sikandar Raza", "219", "Zimbabwe"], ["Pathum Nissanka", "214", "Sri Lanka"], ["AD Hales", "212", "England"], ["Lorkan Tucker", "204", "Ireland"], ["Glenn Phillips", "201", "New Zealand"] ]);
Всегда рекомендуется добавлять заголовки к осям и самой диаграмме, чтобы было понятно, что представлено. Давайте установим это:
// add axis titles
chart.xAxis().title("Batsman");
chart.yAxis().title("Number of runs");
// add a chart title
chart.title("Top 10 Run Scorers at ICC Men's T20 World Cup 2022");
Наконец, я устанавливаю элемент-контейнер — здесь нужен его идентификатор — и создаю визуализацию результирующей гистограммы.
// set the container element
chart.container("container");
// display the chart
chart.draw();
На всякий случай, вот как сейчас выглядит весь JS-код внутри тега <script>:
anychart.onDocumentReady(function () {
// create a column chart
var chart = anychart.column();
// create a data series
var series = chart.column([
["Virat Kohli", "296", "India"],
["Max O'Dowd", "242", "Netherlands"],
["Suryakumar Yadav", "239", "India"],
["JD Butler", "225", "England"],
["Kusal Mendis", "223", "Sri Lanka"],
["Sikandar Raza", "219", "Zimbabwe"],
["Pathum Nissanka", "214", "Sri Lanka"],
["AD Hales", "212", "England"],
["Lorkan Tucker", "204", "Ireland"],
["Glenn Phillips", "201", "New Zealand"]
]);
// add axis titles
chart.xAxis().title("Batsman");
chart.yAxis().title("Number of runs");
// add a chart title
chart.title("Top 10 Run Scorers at ICC Men's T20 World Cup 2022");
// set the container element
chart.container("container");
// display the chart
chart.draw();
});
Результат № 1: Столбчатая диаграмма
Вуаля! Функциональная базовая столбчатая диаграмма JavaScript готова! Вы можете найти интерактивную версию этой диаграммы с полным исходным кодом на Игровой площадке.
Столбчатые диаграммы предназначены для облегчения сравнения. Здесь я вижу, как Вират Кохли значительно опережает остальных, когда остальные находятся рядом друг с другом.
Но это только начало! Теперь мне также интересно, как каждый из этих игроков забил эти раны. Точнее, я хочу узнать, сколько пробежек из общего количества набрано при попадании в шестерку, четверку или пробежав между калитками. Столбчатая диаграмма с несколькими рядами или столбчатая диаграмма с накоплением идеально представляют это.
Итак, давайте углубимся в столбчатые диаграммы в JS, и я покажу вам, как сделать и то, и другое, а затем украсить всю визуализацию!
2. Базовая многорядная гистограмма JS
Так же, как столбчатая диаграмма с одним рядом, столбчатая диаграмма с несколькими рядами может быть создана с помощью JavaScript быстро и легко. Собственно, база остается прежней, а нужно просто поменять данные.
Добавить многосерийные данные
Вместо итогов давайте добавим количество пробежек, набранных при попадании (1) шестерок, (2) четверок и (3) пробега между калитками для каждого из 10 лучших бомбардиров. Я беру эти данные из того же источника, ESPNcricinfo, и создаю набор данных:
var dataSet = anychart.data.set([ ["Virat Kohli", "India", "148", "100", "48"], ["Max O'Dowd", "Netherlands", "106", "88", "48"], ["Suryakumar Yadav", "India", "81", "104", "54"], ["JD Butler", "England", "87", "96", "42"], ["Kusal Mendis", "Sri Lanka", "95", "68", "60"], ["Sikandar Raza", "Zimbabwe", "89", "64", "66"], ["Pathum Nissanka", "Sri Lanka", "114", "52", "48"], ["AD Hales", "England", "76", "76", "60"], ["Lorkan Tucker", "Ireland", "104", "76", "24"], ["Glenn Phillips", "New Zealand", "77", "76", "48"] ]);
Сопоставьте данные
Далее необходимо сопоставить эти данные с тремя рядами, каждый из которых указывает категорию. Первая серия указывает количество пробежек, набранных бегом. Еще одна серия указывает на пробежки, набранные при попадании четверок. А третья серия указывает на пробежки, набранные при попадании шестерок.
var firstSeriesData = dataSet.mapAs({x: 0, value: 4});
var secondSeriesData = dataSet.mapAs({x: 0, value: 3});
var thirdSeriesData = dataSet.mapAs({x: 0, value: 2});
Создать серию
Теперь пришло время создать три серии с соответствующими сопоставленными данными.
var series; firstSeries = chart.column(firstSeriesData); secondSeries = chart.column(secondSeriesData); thirdSeries = chart.column(thirdSeriesData);
Результат № 2: Столбчатая диаграмма с несколькими рядами
И базовая гистограмма JS с несколькими рядами и сгруппированными рядами готова! Вы можете ознакомиться с его интерактивной версией с полным исходным кодом на Playground.
Сгруппированная столбчатая диаграмма с несколькими рядами в значительной степени представляет собой разбивку по категориям оценок. Но на итоги тоже стоит обратить внимание. Итак, давайте теперь создадим столбцы с накоплением!
3. Базовая столбчатая диаграмма JS с накоплением
Чтобы превратить сгруппированные столбцы в столбчатую диаграмму с накоплением, более чем достаточно одной быстрой строки кода JavaScript.
Установите режим суммирования значений
Включите режим суммирования значений по шкале Y:
chart.yScale().stackMode("value");
Результат № 3: Столбчатая диаграмма с накоплением
Ну вот! Теперь у вас есть базовая столбчатая диаграмма JS! Его интерактивная визуализация доступна на Игровой площадке с полным исходным кодом.
Теперь давайте украсим его!
4. Пользовательская столбчатая диаграмма JS с накоплением
В зависимости от того, как именно вы хотите настроить визуализацию столбчатой диаграммы с накоплением на основе JavaScript, вам может потребоваться изменить разные вещи. Я покажу вам некоторые важные, но все же простые в реализации корректировки.
Отрегулируйте серию
При наведении курсора на интерактивные столбцы во всплывающей подсказке автоматически отображаются значения для каждой категории. Но какой где? Назовем серию и все станет ясно!
В то же время, почему бы нам немного не поиграть с цветами? Я раскрашу серию в цвета официального логотипа ICC T20 World Cup 2022. Это сделает столбчатую диаграмму более персонализированной и эстетически приятной.
Для этого я создаю функцию, которая будет принимать каждую серию, ее имя и связанный с ней цвет. Я также добавлю атрибут штриха в функцию, которая будет применяться к каждой серии для создания своего рода заполнения между каждой категорией.
var setupSeries = function (series, name, color) {
series.name(name).stroke("2 #fff 1").fill(color);
};
Теперь я настроил три серии с помощью только что созданной функции и присвоил каждой серии соответствующее имя и цвет.
// store the series var series; // create the first series with the function firstSeries = chart.column(firstSeriesData); setupSeries(firstSeries, "Runs scored with Sixes", "#eb2362"); // create the second series with the function secondSeries = chart.column(secondSeriesData); setupSeries(secondSeries, "Runs scored with Fours", "#00b1e5"); // create the third series with the function thirdSeries = chart.column(thirdSeriesData); setupSeries(thirdSeries, "Running between the wickets", "#0f0449");
Добавить легенду
Чтобы еще больше улучшить разборчивость гистограммы, рекомендуется добавить легенду, которая будет показывать, какой цвет указывает на какую категорию. Это можно легко сделать, просто включив легенду. Я также добавлю некоторые настройки размера шрифта и отступов.
chart.legend().enabled(true).fontSize(14).padding([10, 0, 0, 0]);
Проверьте это, вы можете скрыть/показать определенную категорию, нажав на соответствующий элемент легенды.
Улучшение меток, всплывающей подсказки и заголовка
Как видите, некоторые имена игроков с битой не видны на оси X. Чтобы исправить это, я поворачиваю метки так, чтобы каждое имя было видно.
chart.xAxis().labels().rotation(-90);
Во всплывающей подсказке гистограммы по умолчанию отображаются значения отдельных категорий, но не итоговые значения. Кроме того, итоговые данные не включены в набор данных. Но легко сделать так, чтобы они вычислялись автоматически, а потом куда-то помещать, например, в шапку всплывающей подсказки.
chart.tooltip().titleFormat(function () {
return this.x + " — " + this.points[0].getStat("categoryYSum");
});
Кроме того, можно отображать значения всех категорий вместе во всплывающей подсказке, используя режим объединения.
chart.tooltip().displayMode("union");
Наконец, давайте увеличим заголовок диаграммы, изменим цвет шрифта и добавим отступы.
chart.title().fontSize(20).fontColor("#2b2b2b").padding([5, 0, 0, 0]);
Результат № 4: Индивидуальная столбчатая диаграмма с накоплением
Вот и все! Столбчатая диаграмма с накоплением настраивается. Посмотрите, каким потрясающим и проницательным он стал! И не стесняйтесь видеть эту интерактивную столбчатую диаграмму на основе JS на Playground, где вы также можете поэкспериментировать с ее кодом, добавить свои данные и так далее.
Выглядит мило, не так ли? И я отчетливо вижу как общее количество очков, так и то, как некоторые игроки с битой много бегают, в то время как некоторые набирают больше пробежек со своими ударами.
5. Столбчатая диаграмма JS со 100% накоплением
Наконец, я хочу продемонстрировать, как вы можете создать столбчатую диаграмму со 100% накоплением, которая может упростить сравнение отдельных категорий по всем точкам данных.
Переключение режима укладки столбцов
Просто измените режим стека со значения на процент, и ваша столбчатая диаграмма с накоплением станет столбчатой диаграммой с накоплением на 100%:
chart.yScale().stackMode("percent");
Результат № 5: 100% столбчатая диаграмма с накоплением
Готово, последний пример визуализации данных в этом уроке! Вы можете проверить этот вариант гистограммы с процентным накоплением на основе JavaScript со всем кодом на Playground.
Заключение
В этом руководстве я показал вам, как создавать столбчатые диаграммы JavaScript (HTML5) в различных вариантах, таких как обычная столбчатая диаграмма с одним рядом, сгруппированная столбчатая диаграмма с несколькими рядами, столбчатая диаграмма с накоплением значений и столбец со 100% накоплением. диаграмма. Вы также увидели, как их можно настроить.
Я использовал библиотеку диаграмм AnyChart JavaScript, но в вашем распоряжении есть множество других. Хорошо, что принципиально процесс похож на всех. Таким образом, вы можете использовать то, что соответствует вашим потребностям.
Дайте мне знать, если у вас есть какие-либо вопросы или предложения. Как показывают результаты ватина, общие цифры включают в себя множество границ, но также и довольно много бега. Итак, продолжайте, усердно работайте и добейтесь успеха с помощью таких красивых столбчатых диаграмм и других визуализаций данных!
Публикуется с разрешения Шачи Свадиа. Первоначально появилось на DZone под заголовком Как создавать гистограммы с помощью JavaScript 27 декабря 2022 г.
Вы также можете ознакомиться с Учебным пособием по столбчатым диаграммам JavaScript, первоначально опубликованным ранее в нашем блоге.
См. другие Руководства по построению диаграмм JavaScript.
Первоначально опубликовано на https://www.anychart.com 29 декабря 2022 г.
