Хотите узнать, как легко создать интерактивную диаграмму Marimekko для приложений и веб-страниц на основе HTML5 с помощью JavaScript? Если да, то вы на правильном пути к этому.
Диаграммы Marimekko, также известные как диаграммы Mekko и карты рынка, отображают числовые значения от 0% до 100% по оси Y. Самая интересная часть находится в их оси X, которая показывает сумму значений внутри категорий. Ширина каждой категории по оси X отражает вклад всей категории в совокупность всех данных. Проще говоря, это тип диаграммы с накоплением, которая визуализирует категориальные данные. Тем не менее, оси Y и X различаются в процентной шкале, определяя ширину и высоту каждого сегмента.
Вы энтузиаст смартфонов и хотите посмотреть на мировые поставки смартфонов в 2019 году по кварталам и поставщикам? Тогда особенно следуйте настоящему руководству, поскольку мы должны визуализировать эти рыночные данные в элегантной диаграмме Marimekko, используя простые методы кодирования диаграмм JS.
Как построить базовую диаграмму Marimekko на JS
Общий порядок визуализации данных в диаграммах JavaScript состоит из следующих четырех простых шагов, и построение диаграммы JS Marimekko не является исключением:
- Создайте HTML-страницу с контейнером для отображения диаграммы.
- Подключите все нужные вам скрипты.
- Загрузите данные, которые необходимо визуализировать на диаграмме.
- Наконец, напишите код диаграммы JS.
Теперь давайте углубимся в каждый из этих шагов, чтобы нарисовать нашу изящную диаграмму Marimekko.
Шаг 1. Создайте HTML-страницу
Первым шагом является создание базовой HTML-страницы для размещения диаграммы Marimekko.
<!DOCTYPE html>
<html>
<head>
<title>My Marimekko Chart Example</title>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
// Marimekko chart code goes here
</body>
</html>
Разработанная выше HTML-страница состоит из двух основных разделов: заголовка (между тегами <head></head>) и тела страницы (между тегами <body></body>). В разделе заголовка мы установили заголовок HTML-страницы (между тегами <title></title>) и правила CSS (между тегами <style></style>) для управления внешним видом элемента container.
Элемент div в разделе body с идентификатором container - это блок, который будет использоваться для размещения нашей диаграммы Marimekko. Поскольку я хочу, чтобы изображение отображалось на всей HTML-странице, я установил для полей ширины и высоты элемента контейнера значение 100%. Таким образом, диаграмма будет отображаться на всей странице.
Шаг 2. Подключите все необходимые скрипты
Затем мы должны подключить все сценарии JavaScript, которые необходимы для построения диаграммы Marimekko.
Как правило, эти простые шаги по созданию Marimekko или любой другой диаграммы одинаковы для всех библиотек диаграмм JavaScript. В этом уроке я возьму AnyChart в качестве примера. Это популярная гибкая JS-библиотека для интерактивной визуализации данных, в которой есть отличная документация и справочник по API, а также множество демонстраций, поэтому начать работу с ней легко даже новичкам.
AnyChart имеет модульную систему, что означает, что вам не нужна вся библиотека и вы можете подключать только те типы диаграмм и функции, которые вам действительно нужны. Таким образом, размер кода JavaScript, выполняемого на вашей веб-странице, значительно уменьшается. Это всегда хорошо для производительности. Таким образом, модули «base» и «mekko» должны использоваться в нашем случае для представления данных на диаграмме Marimekko. На них будут ссылки в разделе <head></head> в тегах <script></script>.
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script> <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
Код JavaScript, необходимый для построения диаграммы Marimekko, должен быть написан между тегами <body></body> HTML-страницы.
Ниже приведен внешний вид кода с новыми изменениями. Разве это не круто? Продолжайте читать, ребята. Мы приближаемся к самому захватывающему.
<!DOCTYPE html>
<html>
<head>
<title>My Marimekko Chart Example</title>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// Marimekko chart code goes here
</script>
</body>
</html>
Шаг 3. Загрузите данные, которые хотите визуализировать.
Как было сказано в начале этого руководства, Marimekko принадлежит к семейству двухмерных диаграмм с накоплением, но он иллюстрирует дополнительное измерение данных с помощью столбцов различной ширины. Этот тип диаграммы широко используется для интерпретации данных о продажах и проведения маркетингового анализа, но убедитесь, что вы правильно выбрали данные в соответствии с вашими требованиями.
Вам интересно узнать, сколько всего будет продан ваш любимый бренд смартфонов по всему миру в 2019 году? Подождите, давайте углубимся и визуализируем отгрузки ежеквартально, чтобы данные можно было разместить на диаграмме Marimekko.
В данном случае диаграмма Marimekko будет использоваться для иллюстрации шести ведущих брендов смартфонов (в миллионах) в 2019 году, ежеквартально. Ниже приводится набор данных, который мы будем использовать. (Источник: IDC.)
Чудо графики Mekko заключается в том, что обе оси представляют данные в процентной шкале, но вам нужно ввести только фактические данные, а диаграмма рассчитывает все автоматически.
Мы преобразовали данные о мобильной доставке в конкретный объект JavaScript, как показано ниже. Он содержит настройки заголовка данных, заголовок и сами данные в виде массива массивов.
По оси X показаны общие поставки смартфонов каждой марки, а по оси Y - процентная доля поставок каждой марки смартфонов по кварталам.
Ниже приводится набор данных, который мы будем использовать. Параметр header объекта JavaScript ниже используется для установки квартальной информации для каждой марки производителя смартфонов. Следовательно, мы увидим четвертные отношения.
var data = {
title: 'Global Smartphone Shipments (In Millions) in 2019, quarterly',
header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
rows: [
['Huawei', 59.1,56.6,66.8,56.2],
['Vivo', 23.9,27,31.3,31.5],
['Apple', 42,36.5,44.8,72.3],
['Samsung', 72,76.3,78.2,70.4],
['Xiaomi', 27.8,32.3,31.7,32.9],
['Oppo', 25.7,30.6,32.3,31.4],
['Others', 90.5,97.7,94.9,106.4],
]
};
Шаг 4. Написание кода диаграммы JS Marimekko
После того, как все приготовления будут выполнены, мы можем перейти в последний раздел, чтобы отобразить самый долгожданный график Marimekko. Весь код диаграммы JavaScript, отвечающий за отображение диаграммы Marimekko, должен быть вставлен в функцию anychart.onDocumentReady(), которая записана в теге <script>. Как следует из названия функции, она ждет, пока страница не будет готова для отображения данных.
<script>
anychart.onDocumentReady(function() {
// The entire JavaScript code of the Marimekko chart
// will be here
});
</script>
Затем используйте код из шага 3, чтобы сгенерировать данные, которые необходимо передать в диаграмму Mekko.
var data = {
title: 'Global Smartphone Shipments (In Millions) in 2019, quarterly',
header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
rows: [
['Huawei', 59.1,56.6,66.8,56.2],
['Vivo', 23.9,27,31.3,31.5],
['Apple', 42,36.5,44.8,72.3],
['Samsung', 72,76.3,78.2,70.4],
['Xiaomi', 27.8,32.3,31.7,32.9],
['Oppo', 25.7,30.6,32.3,31.4],
['Others', 90.5,97.7,94.9,106.4],
]
};
Следующим шагом является указание типа JS-диаграммы. В этом случае мы должны использовать mekko диаграмму и снабдить ее данными для визуализации в диаграмме Marimekko.
// create a mekko (marimekko) chart var chart = anychart.mekko(); // set the chart data chart.data(data);
Давайте включим легенду диаграммы, как показано ниже.
// enable the chart legend
chart.legend(true);Наконец, команда для рисования диаграммы Marimekko в контейнере:
// set the chart container id
chart.container('container');
// draw the resulting marimekko chart
chart.draw();
А вот и то, чего мы ждали. (См. Эту базовую диаграмму Marimekko на AnyChart Playground.)
Полный код базовой интерактивной диаграммы Marimekko HTML5, представленной выше, приведен ниже.
<!DOCTYPE html>
<html>
<head>
<title>My Marimekko Chart Example</title>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<script>
anychart.onDocumentReady(function () {
// create data
var data = {
title: 'Global Smartphone Shipments (In Millions) in 2019',
header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
rows: [
['Huawei', 59.1,56.6,66.8,56.2],
['Vivo', 23.9,27,31.3,31.5],
['Apple', 42,36.5,44.8,72.3],
['Samsung', 72,76.3,78.2,70.4],
['Xiaomi', 27.8,32.3,31.7,32.9],
['Oppo', 25.7,30.6,32.3,31.4],
['Others', 90.5,97.7,94.9,106.4],
]
};
// create a mekko (marimekko) chart
var chart = anychart.mekko();
// set the chart data
chart.data(data);
// enable the chart legend
chart.legend(true);
// set the chart container id
chart.container('container');
// draw the resulting marimekko chart
chart.draw();
});
</script>
</body>
</html>
Настройка диаграммы JS Marimekko
Ну, этот раздел создан для того, чтобы добавить немного глазури на торт. У вас есть существенные ресурсы документации в AnyChart, где вы можете получить глубокие знания для улучшения, изменения и настройки сгенерированных диаграмм. Для вдохновения загляните в демонстрационную галерею.
Давайте попробуем изменить нашу диаграмму JavaScript Marimekko, чтобы она выглядела более элегантно.
Используйте палитры, чтобы изменить цвет диаграммы
Цвет диаграмм Marimekko можно настроить с помощью параметра Палитры. Обратитесь к этому руководству, чтобы узнать больше о палитрах AnyChart. В приведенном ниже примере мы применяем палитру Вина. Вас ждет еще много готовых цветовых палитр.
// apply a palette for coloring
chart.palette(anychart.palettes.wines);Разве диаграмма не выглядит удобной в новых цветах? (Смотрите на AnyChart Playground.)
Отформатируйте оси диаграммы
Следующие дополнения кода используются для форматирования осей путем добавления заголовков и изменения ориентации осей.
Вот код для включения заголовков осей:
// set the x-axis title
chart.xAxis().title('Smartphone Shipments by Brands');
// set the y-axis title
chart.yAxis().title('Smartphone Shipments by Quarters %');
Ориентация оси Y может быть левой или правой. Значение по умолчанию оставлено. Ориентация оси X может быть установлена как верхняя или нижняя, и по умолчанию она устанавливается снизу. Настройте их в соответствии с вашими интересами. Следующие изменения внесены в ориентацию обеих осей. В целях демонстрации ориентация оси X и оси Y будет установлена как верхняя и правая.
// set the x-axis orientation
chart.xAxis().orientation("top");
// set the y-axis orientation
chart.yAxis().orientation("right");
Диаграмма кажется более читаемой с названиями осей. (Смотрите на AnyChart Playground.)
Начиная со следующего примера, ориентация осей диаграммы Marimekko возвращается к виду по умолчанию.
Форматирование всплывающих подсказок диаграммы
Всплывающие подсказки обычно скрыты, но становятся видимыми при наведении курсора на точки диаграммы. Это можно использовать для отображения дополнительной полезной информации.
В качестве первого шага давайте сгенерируем информацию, которая должна отображаться при наведении курсора. Согласно следующему фрагменту кода, мы отображаем seriesName (квартал) и value (сумма отгрузки за соответствующий квартал в миллионах долларов США).
// customize the tooltip format
chart.tooltip().format('{%seriesName}: ${%Value}M');Режим отображения «объединение» позволяет отображать данные сразу по всем кварталам.
// set the tooltip display mode
chart.tooltip().displayMode("union"); Ниже приводится еще одна простая модификация внешнего вида заголовка всплывающей подсказки диаграммы Marimekko. Мы можем изменить размер шрифта, внешний вид фона и толщину шрифта, как показано ниже.
// customize the tooltip title
var title = chart.tooltip().title();
title.fontFamily("Calibri");
title.fontDecoration("underline");
title.fontWeight(700);
title.fontSize(18);
Наша диаграмма Marimekko на основе JS, кажется, становится еще лучше и читабельнее. (Смотрите на AnyChart Playground.)
Отформатируйте настройки метки диаграммы
Метка - это текстовое поле, которое может отображаться вместе с точкой на диаграмме. Ярлыки обычно указывают информацию, содержащуюся в каждой точке. Давайте настроим метки на этой диаграмме Marimekko, чтобы добавить, что стоимость доставки за каждый квартал отображается в миллионах долларов США.
// set the chart labels settings
chart.labels().format('${%Value}M');Наконец, вот как выглядит наша интерактивная диаграмма Marimekko после внесения соответствующих настроек, как было предложено выше. (Смотрите на AnyChart Playground.)
Недавно настроенная усовершенствованная диаграмма Marimekko выглядит более информативной и привлекательной, чем первоначальная визуализация. Вы можете проявить творческий подход, чтобы представить диаграмму более подробной информацией.
Согласно окончательной таблице Marimekko, в 2019 году Samsung была ведущим поставщиком смартфонов в мире. Но имейте в виду, Samsung! Huawei, похоже, скоро бросит вам вызов. Вы заметили, что в четвертом квартале Apple показала исключительно хорошие результаты, опередив всех своих конкурентов? Историей успеха этого выдающегося достижения стала презентация серии iPhone 11, которая привлекла внимание многих людей по всему миру.
Поиграйте со своими данными, ребята, потому что они ждут, чтобы раскрыть вам интересную информацию.
Ниже приведен полный HTML-код окончательной диаграммы Marimekko в этом руководстве:
<!DOCTYPE html>
<html>
<head>
<title>My Marimekko Chart Example</title>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<script>
anychart.onDocumentReady(function () {
// create data
var data = {
title: 'Global Smartphone Shipments (In Millions) in 2019',
header: ['Name', 'Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
rows: [
['Huawei', 59.1,56.6,66.8,56.2],
['Vivo', 23.9,27,31.3,31.5],
['Apple', 42,36.5,44.8,72.3],
['Samsung', 72,76.3,78.2,70.4],
['Xiaomi', 27.8,32.3,31.7,32.9],
['Oppo', 25.7,30.6,32.3,31.4],
['Others', 90.5,97.7,94.9,106.4],
]
};
// create a mekko (marimekko) chart
var chart = anychart.mekko();
// set the chart data
chart.data(data);
// enable the chart legend
chart.legend(true);
// apply a palette for coloring
chart.palette(anychart.palettes.wines);
// customize the tooltip format
chart.tooltip().format('{%seriesName}: ${%Value}M');
// set the tooltip display mode
chart.tooltip().displayMode("union");
// customize the tooltip title
var title = chart.tooltip().title();
title.fontFamily("Calibri");
title.fontDecoration("underline");
title.fontWeight(700);
title.fontSize(18);
// set the chart labels settings
chart.labels().format('${%Value}M');
// set the x-axis title
chart.xAxis().title('Smartphone Shipments by Brands');
// set the y-axis title
chart.yAxis().title('Smartphone Shipments by Quarters %');
// set the chart container id
chart.container('container');
// draw the resulting marimekko chart
chart.draw();
});
</script>
</body>
</html>
Заключение
Разве создание диаграммы Marimekko с использованием JavaScript не было более простой задачей, чем вы представляли в начале руководства? API-интерфейсы некоторых графических библиотек, подобные этому, легко доступны, информативны и могут значительно упростить работу по разработке визуализации данных. Доступная мощная документация поможет вам быстро решить любые проблемы, с которыми вы можете столкнуться при кодировании. Удачи!
Первоначально опубликовано на https://www.anychart.com 22 декабря 2020 г.
