Как сделать временную диаграмму (в JS)

Временная диаграмма — это отличный способ представить важные события и периоды в хронологическом порядке. Сейчас я научу вас, как легко создать элегантную интерактивную визуализацию с помощью JavaScript!

Чтобы сделать этот урок одновременно полезным и увлекательным, я решил взять реальные данные. Присоединяйтесь ко мне, поскольку я визуализирую жизнь Элона Маска в виде временной диаграммы JS шаг за шагом, сосредоточившись на самых важных событиях в его карьере предпринимателя и инвестора.

Содержание

Предварительный просмотр временной диаграммы
4 шага для создания базовой временной диаграммы на JS
1. Создание веб-страницы
2. Добавление скриптов
3. Установка данных
4. Настройка визуализации
Результат: Базовая временная диаграмма JS
Создание пользовательской временной диаграммы на 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.

Здесь будет две серии разных типов, диапазон и момент. Каждая из них будет добавлена с помощью отдельной функции.

Серия range предназначена для периодов. Каждая точка данных имеет имя, а также даты начала и окончания.

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

Цвета
Метки серий и их высота
Заголовок
Подсказка
Скроллер
Контекстное меню и экспорт

ДЛЯ ПОЛУЧЕНИЯ ПОДРОБНОЙ ИНФОРМАЦИИ ОБ ЭТИХ НАСТРОЙКАХ ВРЕМЕННОЙ ДИАГРАММЫ JS ПРОДОЛЖАЙТЕ ЧИТАТЬ ЗДЕСЬ.