Диаграмма временной шкалы — отличный способ представить важные события и периоды в хронологическом порядке. Теперь позвольте мне научить вас, как легко создать элегантную интерактивную визуализацию, подобную этой, с помощью JavaScript!
Чтобы сделать этот урок полезным и интересным, я решил взять реальные данные. Присоединяйтесь ко мне, пока я шаг за шагом визуализирую жизнь Илона Маска на временной шкале JS, уделяя особое внимание наиболее важным событиям в его карьере предпринимателя и инвестора.
Предварительный просмотр временной шкалы
Взгляните на красивую диаграмму временной шкалы JavaScript, которую я буду создавать по ходу руководства, и продолжайте читать, чтобы узнать, как это сделать!
4 шага для создания базовой диаграммы временной шкалы JS
Создание интерактивной временной диаграммы на основе JavaScript, даже простейшей, может показаться сложной задачей. Но прямо сейчас вы увидите, как это сделать с легкостью.
В этом руководстве процесс построения диаграммы временной шкалы JS разделен на четыре этапа: создание веб-страницы, добавление сценариев, настройка данных и настройка визуализации.
Потрясающая базовая диаграмма временной шкалы будет организована всего в нескольких строках понятного кода. Потом покажу как его можно настроить (тоже без особых сложностей). Подписывайтесь на меня!
1. Создание веб-страницы
Сначала я создаю простую веб-страницу с блочным элементом HTML. Здесь появится моя временная шкала на основе JavaScript.
Я предоставляю этому элементу идентификатор и устанавливаю его высоту и вес на 100%, чтобы визуализация занимала всю страницу.
<html>
<head>
<title>JavaScript Timeline 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>
2. Добавление скриптов
Во-вторых, я добавляю все сценарии, с помощью которых собираюсь построить временную диаграмму, в раздел <head> HTML-страницы.
В этом руководстве я буду использовать AnyChart JS Charts, надежную библиотеку диаграмм JavaScript с широкими готовыми возможностями, которые упрощают быструю визуализацию данных в десятках типов диаграмм, включая временные шкалы.
Здесь мне нужны модули Core и Timeline.
<html>
<head>
<title>JavaScript Timeline Chart</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-timeline.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>
// All the JS code for the timeline chart will go here.
</script>
</body>
</html>
3. Установка данных
В-третьих, я задаю данные, которые хочу визуализировать, на временной диаграмме JS.
Будет две серии разного типа, дальность и момент. Каждый будет добавлен через отдельную функцию.
Ряд диапазонов предназначен для периодов. Каждая точка данных имеет имя, а также даты начала и окончания.
function rangeData() {
return [
{
name: "Childhood and Education",
start: "1971/06/28",
end: "1995/09/01"
},
{
name: "Entrepreneur Journey",
start: "1983/06/28",
end: "2002/03/13"
},
{
name: "Making of Tycoon",
start: "2002/03/14",
end: "2010/06/28"
},
{
name: "Rise of Tycoon",
start: "2010/06/29",
end: "2030/01/01"
}
];
}
Серия моментов предназначена для отдельных событий. Каждая точка данных имеет дату и текст.
function momentData() {
return [
["1971/06/28", "Elon Musk was born in South Africa"],
["1981/06/28", "Began to learn computer programming on his own"],
["1983/06/28", "Sold the code of his game Blastar for $500"],
["1990/09/01", "Entered Queen's University in Kingston, Ontario"],
["1992/09/01", "Transferred to the University of Pennsylvania"],
["1995/06/01", "Received bachelor's degrees in physics and economics"],
["1995/09/01", "Started a Ph.D. at Stanford (dropped out in 2 days"],
["1995/11/06", "Founded Zip2 with his brother"],
["1999/02/01", "Sold Zip2 to Compaq for $307M"],
["1999/03/01", "Co-founded X.com"],
["2000/03/01", "Merged X.com with Confinity to form PayPal"],
["2001/01/01", "Started conceptualizing Mars Oasis"],
["2002/03/14", "Founded SpaceX & became its CEO"],
["2002/10/03", "Received $175.8M from PayPal's sale to eBay for $1.5B"],
["2004/02/01", "Invested $6.5M in Tesla and joined its board as chairman"],
["2006/01/01", "SpaceX started to get NASA contracts"],
["2008/10/01", "Became CEO at Tesla"],
["2010/06/29", "Tesla's first IPO"],
["2015/12/11", "Co-founded OpenAI"],
["2016/07/01", "Co-founded Neuralink"],
["2018/02/21", "Resigned his board seat at OpenAI"],
["2021/11/06", "Started selling his Tesla stock (10% for $16.4B by year end)"],
["2022/04/13", "Made an offer to buy Twitter"],
["2022/07/08", "Withdrew his $44B bid to buy Twitter"]
];
}
Хорошо! У нас есть страница, скрипты и готовые данные. Теперь пришло время добавить некоторый код диаграммы JavaScript, чтобы завершить предполагаемую интерактивную визуализацию временной шкалы!
4. Настройка визуализации
Для начала добавим данные из предыдущего шага. Затем мы используем функцию, чтобы убедиться, что наш последующий код, настраивающий график временной шкалы, выполняется, когда веб-страница уже загружена.
<script>
// set the range series data
function rangeData() {
return [
{
name: "Childhood and Education",
start: "1971/06/28",
end: "1995/09/01"
},
{
name: "Entrepreneur Journey",
start: "1983/06/28",
end: "2002/03/13"
},
{
name: "Making of Tycoon",
start: "2002/03/14",
end: "2010/06/28"
},
{
name: "Rise of Tycoon",
start: "2010/06/29",
end: "2030/01/01"
}
];
}
// set the moment series data
function momentData() {
return [
["1971/06/28", "Elon Musk was born in South Africa"],
["1981/06/28", "Began to learn computer programming on his own"],
["1983/06/28", "Sold the code of his game Blastar for $500"],
["1990/09/01", "Entered Queen's University in Kingston, Ontario"],
["1992/09/01", "Transferred to the University of Pennsylvania"],
["1995/06/01", "Received bachelor's degrees in physics and economics"],
["1995/09/01", "Started a Ph.D. at Stanford (dropped out in 2 days"],
["1995/11/06", "Founded Zip2 with his brother"],
["1999/02/01", "Sold Zip2 to Compaq for $307M"],
["1999/03/01", "Co-founded X.com"],
["2000/03/01", "Merged X.com with Confinity to form PayPal"],
["2001/01/01", "Started conceptualizing Mars Oasis"],
["2002/03/14", "Founded SpaceX & became its CEO"],
["2002/10/03", "Received $175.8M from PayPal's sale to eBay for $1.5B"],
["2004/02/01", "Invested $6.5M in Tesla and joined its board as chairman"],
["2006/01/01", "SpaceX started to get NASA contracts"],
["2008/10/01", "Became CEO at Tesla"],
["2010/06/29", "Tesla's first IPO"],
["2015/12/11", "Co-founded OpenAI"],
["2016/07/01", "Co-founded Neuralink"],
["2018/02/21", "Resigned his board seat at OpenAI"],
["2021/11/06", "Started selling his Tesla stock (10% for $16.4B by year end)"],
["2022/04/13", "Made an offer to buy Twitter"],
["2022/07/08", "Withdrew his $44B bid to buy Twitter"]
];
}
anychart.onDocumentReady(function() {
// The (following) timeline charting code lands here.
});
</script>
Затем в функции anychart.onDocumentReady() я создаю экземпляр временной диаграммы с помощью функции timeline(), устанавливаю обе серии и заставляю метки серий диапазонов отображать атрибут name.
// create a timeline chart
let chart = anychart.timeline();
// create a range series
let rangeSeries = chart.range(rangeData());
// create a moment series
let momentSeries = chart.moment(momentData());
// configure the range series label settings
rangeSeries.labels().format("{%name}");
Также тут же я добавляю еще несколько строк, чтобы дать название диаграмме временной шкалы, определяю для нее контейнер и, наконец, даю команду отрисовать результирующий график.
// set the chart title
chart.title("Timeline of Elon Musk");
// set the chart container id
chart.container("container");
// draw the chart
chart.draw();
Результат: базовая временная диаграмма JS
Ну вот! Крутая интерактивная визуализация временной шкалы на JavaScript готова. И построить его было совсем не сложно, не так ли?
Вот полный код для этой временной шкалы. Он также доступен на AnyChart Playground.
<html>
<head>
<title>JavaScript Timeline Chart</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-timeline.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>
// set the range series data
function rangeData() {
return [
{
name: "Childhood and Education",
start: "1971/06/28",
end: "1995/09/01"
},
{
name: "Entrepreneur Journey",
start: "1983/06/28",
end: "2002/03/13"
},
{
name: "Making of Tycoon",
start: "2002/03/14",
end: "2010/06/28"
},
{
name: "Rise of Tycoon",
start: "2010/06/29",
end: "2030/01/01"
}
];
}
// set the moment series data
function momentData() {
return [
["1971/06/28", "Elon Musk was born in South Africa"],
["1981/06/28", "Began to learn computer programming on his own"],
["1983/06/28", "Sold the code of his game Blastar for $500"],
["1990/09/01", "Entered Queen's University in Kingston, Ontario"],
["1992/09/01", "Transferred to the University of Pennsylvania"],
["1995/06/01", "Received bachelor's degrees in physics and economics"],
["1995/09/01", "Started a Ph.D. at Stanford (dropped out in 2 days"],
["1995/11/06", "Founded Zip2 with his brother"],
["1999/02/01", "Sold Zip2 to Compaq for $307M"],
["1999/03/01", "Co-founded X.com"],
["2000/03/01", "Merged X.com with Confinity to form PayPal"],
["2001/01/01", "Started conceptualizing Mars Oasis"],
["2002/03/14", "Founded SpaceX & became its CEO"],
["2002/10/03", "Received $175.8M from PayPal's sale to eBay for $1.5B"],
["2004/02/01", "Invested $6.5M in Tesla and joined its board as chairman"],
["2006/01/01", "SpaceX started to get NASA contracts"],
["2008/10/01", "Became CEO at Tesla"],
["2010/06/29", "Tesla's first IPO"],
["2015/12/11", "Co-founded OpenAI"],
["2016/07/01", "Co-founded Neuralink"],
["2018/02/21", "Resigned his board seat at OpenAI"],
["2021/11/06", "Started selling his Tesla stock (10% for $16.4B by year end)"],
["2022/04/13", "Made an offer to buy Twitter"],
["2022/07/08", "Withdrew his $44B bid to buy Twitter"]
];
}
anychart.onDocumentReady(function () {
// create a timeline chart
let chart = anychart.timeline();
// create a range series
let rangeSeries = chart.range(rangeData());
// create a moment series
let momentSeries = chart.moment(momentData());
// configure the range series label settings
rangeSeries.labels().format("{%name}");
// set the chart title
chart.title("Timeline of Elon Musk");
// set the chart container id
chart.container("container");
// draw the chart
chart.draw();
});
</script>
</body>
</html>
Создание пользовательской диаграммы временной шкалы JS
Хронология и так выглядит захватывающей. Но всегда есть куда совершенствоваться! Я покажу вам, как некоторые части такой диаграммы временной шкалы JavaScript можно красиво настроить, опять же без особых хлопот.
1. Цвета временной шкалы
Простым и эффективным изменением при персонализации диаграммы является изменение цветов.
Сначала я добавляю атрибуты fill и stroke к данным ряда диапазонов, и график временной шкалы автоматически применит оттуда соответствующие значения:
function rangeData() {
return [
{
name: "Childhood and Education",
start: "1971/06/28",
end: "1995/09/01",
fill: "#00a8e0 0.5",
stroke: "#00a8e0"
},
{
name: "Entrepreneur Journey",
start: "1983/06/28",
end: "2002/03/13",
fill: "#1c4598 0.5",
stroke: "#1c4598"
},
{
name: "Making of Tycoon",
start: "2002/03/14",
end: "2010/06/28",
fill: "#a05e9c 0.6",
stroke: "#a05e9c"
},
{
name: "Rise of Tycoon",
start: "2010/06/29",
end: "2030/01/01",
fill: "#6e4c82 0.65",
stroke: "#6e4c82"
}
];
}
Во-вторых, я изменяю цвет маркеров серии моментов следующим образом:
momentSeries.normal().markers().fill("#ffdd0e");
momentSeries.normal().markers().stroke("#e9ae0b");
2. Этикетки серии диапазонов и высота
Затем я хочу предоставить содержимое меток рядов диапазонов с начальным и конечным годами соответствующих периодов. Также легко форматировать метки с помощью HTML. Проверьте это.
rangeSeries
.labels()
.useHtml(true)
.fontColor("#fff")
.format(
'{%name}<br><span style="font-size: 85%">{%start}{dateTimeFormat:YYYY}–{%end}{dateTimeFormat:YYYY}</span>'
);
Позвольте мне также увеличить высоту серии диапазонов, чтобы новая добавленная информация могла аккуратно вписаться. Это делается всего одной строкой кода.
rangeSeries.height(50);
3. Название временной шкалы
Чтобы предоставить больше информации о том, что показывает временная шкала, я настраиваю заголовок диаграммы с помощью HTML.
chart
.title()
.enabled(true)
.useHtml(true)
.text(
'<span style = "color: #e12026; font-size:20px;">Timeline of Elon Musk</span>' +
'<br/><span style="font-size: 16px;">Marking some of the most important professional milestones from 1971 to 2022</span>'
);
Теперь диаграмма временной шкалы на основе JS имеет подзаголовок, и вся секция заголовка украшена.
4. Подсказка временной шкалы
После этого я хочу внести несколько изменений во всплывающую подсказку диаграммы временной шкалы как для рядов диапазонов, так и для рядов моментов.
Для каждой серии я создаю шаблон формата на основе HTML для текста всплывающей подсказки, включаю HTML и применяю настроенный формат. Для четкого законченного вида я удаляю заголовки всплывающих подсказок и разделители.
// format the range series tooltip
let rangeTooltipFormat =
"<span style='font-weight:600;font-size:10pt'>" +
"{%name}</span><br><br>From " +
"{%start}{dateTimeFormat:YYYY} to " +
"{%end}{dateTimeFormat:YYYY}";
rangeSeries.tooltip().useHtml(true);
rangeSeries.tooltip().format(rangeTooltipFormat);
rangeSeries.tooltip().title().enabled(false);
rangeSeries.tooltip().separator().enabled(false);
// format the moment series tooltip
let momentTooltipFormat =
"<span>{%x}{dateTimeFormat: MMMM YYYY}</span>";
momentSeries.tooltip().useHtml(true);
momentSeries.tooltip().format(momentTooltipFormat);
momentSeries.tooltip().title().enabled(false);
momentSeries.tooltip().separator().enabled(false);
5. Скроллер временной шкалы
Изучать диаграммы временной шкалы легче, когда вы можете легко рассмотреть определенный период поближе. Здесь вы можете использовать колесо мыши для увеличения и уменьшения масштаба. Но также можно добавить скроллер под временной шкалой, для чего требуется только одна быстрая строка.
chart.scroller().enabled(true);
6. Контекстное меню и экспорт
Наконец, позвольте мне добавить еще одну классную вещь — контекстное меню с опциями для сохранения и публикации временной шкалы.
Я просто ссылаюсь на эти файлы JS и CSS вместе с другими, уже присутствующими в разделе <head> веб-страницы, а настройки библиотеки диаграмм по умолчанию позаботятся обо всем остальном.
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-ui.min.js"></script> <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-exports.min.js"></script> <link rel="stylesheet" href="https://cdn.anychart.com/releases/8.11.0/css/anychart-ui.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.anychart.com/releases/8.11.0/fonts/css/anychart-font.min.css"/>
Результат: Пользовательская диаграмма временной шкалы JS
Вот и все. Элегантная интерактивная временная шкала JavaScript готова!
Ознакомьтесь с кодом, лежащим в основе этой временной шкалы ниже. Он также доступен на Игровой площадке AnyChart, где вы можете продолжать осваивать временные шкалы JS, дополнительно настраивая визуализацию, добавляя свои данные и т. д.
<html>
<head>
<title>JavaScript Timeline Chart</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-timeline.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-exports.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/releases/8.11.0/css/anychart-ui.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.anychart.com/releases/8.11.0/fonts/css/anychart-font.min.css"/>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// set the range series data
function rangeData() {
return [
{
name: "Childhood and Education",
start: "1971/06/28",
end: "1995/09/01",
fill: "#00a8e0 0.5",
stroke: "#00a8e0"
},
{
name: "Entrepreneur Journey",
start: "1983/06/28",
end: "2002/03/13",
fill: "#1c4598 0.5",
stroke: "#1c4598"
},
{
name: "Making of Tycoon",
start: "2002/03/14",
end: "2010/06/28",
fill: "#a05e9c 0.6",
stroke: "#a05e9c"
},
{
name: "Rise of Tycoon",
start: "2010/06/29",
end: "2030/01/01",
fill: "#6e4c82 0.65",
stroke: "#6e4c82"
}
];
}
// set the moment series data
function momentData() {
return [
["1971/06/28", "Elon Musk was born in South Africa"],
["1981/06/28", "Began to learn computer programming on his own"],
["1983/06/28", "Sold the code of his game Blastar for $500"],
["1990/09/01", "Entered Queen's University in Kingston, Ontario"],
["1992/09/01", "Transferred to the University of Pennsylvania"],
["1995/06/01", "Received bachelor's degrees in physics and economics"],
["1995/09/01", "Started a Ph.D. at Stanford (dropped out in 2 days"],
["1995/11/06", "Founded Zip2 with his brother"],
["1999/02/01", "Sold Zip2 to Compaq for $307M"],
["1999/03/01", "Co-founded X.com"],
["2000/03/01", "Merged X.com with Confinity to form PayPal"],
["2001/01/01", "Started conceptualizing Mars Oasis"],
["2002/03/14", "Founded SpaceX & became its CEO"],
["2002/10/03", "Received $175.8M from PayPal's sale to eBay for $1.5B"],
["2004/02/01", "Invested $6.5M in Tesla and joined its board as chairman"],
["2006/01/01", "SpaceX started to get NASA contracts"],
["2008/10/01", "Became CEO at Tesla"],
["2010/06/29", "Tesla's first IPO"],
["2015/12/11", "Co-founded OpenAI"],
["2016/07/01", "Co-founded Neuralink"],
["2018/02/21", "Resigned his board seat at OpenAI"],
["2021/11/06", "Started selling his Tesla stock (10% for $16.4B by year end)"],
["2022/04/13", "Made an offer to buy Twitter"],
["2022/07/08", "Withdrew his $44B bid to buy Twitter"]
];
}
anychart.onDocumentReady(function () {
// create a timeline chart
let chart = anychart.timeline();
// create a range series
let rangeSeries = chart.range(rangeData());
// create a moment series
let momentSeries = chart.moment(momentData());
// configure the range series label settings
rangeSeries
.labels()
.useHtml(true)
.fontColor("#fff")
.format(
'{%name}<br><span style="font-size: 85%">{%start}{dateTimeFormat:YYYY}–{%end}{dateTimeFormat:YYYY}</span>'
);
// customize the moment series marker
momentSeries.normal().markers().fill("#ffdd0e");
momentSeries.normal().markers().stroke("#e9ae0b");
// set the range series bar height
rangeSeries.height(50);
// format the range series tooltip
let rangeTooltipFormat =
"<span style='font-weight:600;font-size:10pt'>" +
"{%name}</span><br><br>From " +
"{%start}{dateTimeFormat:YYYY} to " +
"{%end}{dateTimeFormat:YYYY}";
rangeSeries.tooltip().useHtml(true);
rangeSeries.tooltip().format(rangeTooltipFormat);
rangeSeries.tooltip().title().enabled(false);
rangeSeries.tooltip().separator().enabled(false);
// format the moment series tooltip
let momentTooltipFormat =
"<span>{%x}{dateTimeFormat: MMMM YYYY}</span>";
momentSeries.tooltip().useHtml(true);
momentSeries.tooltip().format(momentTooltipFormat);
momentSeries.tooltip().title().enabled(false);
momentSeries.tooltip().separator().enabled(false);
// set the chart title
chart
.title()
.enabled(true)
.useHtml(true)
.text(
'<span style = "color: #e12026; font-size:20px;">Timeline of Elon Musk</span><br/>' +
'<span style="font-size: 16px;">Marking some of the most important professional milestones from 1971 to 2022</span>'
);
// enable the scroller
chart.scroller().enabled(true);
// set the chart container id
chart.container("container");
// draw the chart
chart.draw();
});
</script>
</body>
</html>
Заключение
Создавать и настраивать красивые интерактивные временные диаграммы довольно просто, если вы знаете, как использовать для этого JavaScript. Надеюсь, я правильно объяснил и проиллюстрировал это в этом уроке. Чтобы узнать больше, загляните в документацию по диаграммам временной шкалы и не пропустите эти классные примеры диаграмм временной шкалы.
В общем, нам не нужно быть Илоном Маском, чтобы создавать потрясающие визуализации. Итак, давайте просто воплотим некоторые данные в жизнь! На самом деле существует множество способов визуализации данных и несколько типов диаграмм на выбор.
Не стесняйтесь задавать вопросы здесь в комментариях, если что-то нужно уточнить. Ваше здоровье.
Мы благодарны Shachee Swadia за создание этой фантастической временной диаграммы исключительно для нашего блога.
В нашем блоге есть еще несколько интересных руководств по построению диаграмм JavaScript, с которыми вы, возможно, захотите ознакомиться.
Напишите нам, если хотите написать гостевой пост.
Первоначально опубликовано на https://www.anychart.com 4 августа 2022 г.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn и Discord.
