Как построить линейную диаграмму JavaScript

Пошаговое руководство по созданию интерактивных линейных диаграмм JS

Линейный график - один из основных и наиболее часто используемых приемов визуализации данных. Такие графики, как известно, дают информативный взгляд на изменение одной или нескольких переменных во времени. Прямо сейчас я объясню, как легко создать классную интерактивную линейную диаграмму с помощью JavaScript!

Процесс будет продемонстрирован с помощью убедительных примеров, с которыми вы впоследствии сможете поиграть, чтобы отточить свои новые навыки разработки визуализации данных.

Чтобы статья была особенно интересной для чтения и изучения, я решил продемонстрировать практическое применение линейной диаграммы к реальным данным. Июнь отмечался как Месяц гордости, и я подумал, что было бы здорово увидеть, как изменилось отношение к ЛГБТ-людям за последние годы. Затем я нашел интересные данные общественного мнения из Общего социального исследования (GSS), проекта Национального центра изучения общественного мнения (NORC) при Чикагском университете, которые оказались подходящими, и взял их часть, чтобы визуализировать в этом руководство.

Итак, следуйте инструкциям, и вы также сможете изучить сдвиги в принятии однополых отношений в Соединенных Штатах за последние два десятилетия! Сначала мы создадим линейную диаграмму JS с одной серией, представляющую общую тенденцию, а затем - линейную диаграмму с несколькими сериями, чтобы визуализировать разбивку по возрастным группам.

Все на борту!

Предварительный просмотр линейной диаграммы JS

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

Разве не приятно смотреть на эту красочную диаграмму и с уверенностью смотреть на будущее?

Прочтите это пошаговое руководство до конца, и вы узнаете, как легко создать такой линейный график с минимальным написанием кода.

Создание простой линейной диаграммы JavaScript за 4 простых шага

Обычный порядок визуализации данных в диаграммах JavaScript можно разбить на четыре основных шага, и построение линейной диаграммы JS следует тому же шаблону:

Создание базовой HTML-страницы для отображения диаграммы.
Включая все необходимые нам JS-скрипты.
Добавление данных для диаграммы.
Написание кода JS-диаграммы.

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

1. Создание базовой HTML-страницы.

Для начала мы создаем базовую HTML-страницу с блочным элементом <div> для нашей линейной диаграммы. Чтобы ссылаться на этот блочный элемент позже в коде, мы даем ему атрибут id, например, «container».

<html>
  <head>
    <title>JavaScript Line 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>

Здесь мы предоставляем <div> ширину и высоту 100%, чтобы отобразить линейную диаграмму в полноэкранном режиме. Но в этом нет необходимости и, конечно, можно настроить в соответствии с вашими требованиями.

2. Включая все скрипты JS

Второй шаг - сослаться на все необходимые скрипты для построения линейной диаграммы JS. Эти скрипты будут помещены в тег <script> внутри раздела <head>.

В этом уроке линейный график построен с помощью AnyChart. Это легкая и гибкая библиотека диаграмм JavaScript (HTML5) с подробной документацией и справочником по API. Кроме того, есть множество примеров диаграмм, которые можно проверить и использовать в качестве отправной точки, а также утилита под названием Playground для экспериментов с кодом.

Поскольку линейная диаграмма является одним из основных типов диаграмм, для нее требуется только базовый модуль AnyChart. Мы легко можем получить его в CDN. Сам код линейной диаграммы JS будет записан в теге <script> внутри раздела <body>.

<html>
  <head>
    <title>JavaScript Line Chart</title>
    <script src="https://cdn.anychart.com/releases/8.10.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>
      // All the code for the JS line chart will come here
    </script>
  </body>
</html>

3. Добавление данных

В этом уроке мы будем визуализировать данные из GSS Data Explorer, а именно данные, которые показывают, как разбиваются ответы на вопрос Разве взрослым однополого пола нельзя вступать в сексуальные отношения? изменилось с 1990 по 2018 год. А именно, мы представим процент ответов Совсем не ошибаюсь, который выглядит здесь как хороший показатель принятия.

AnyChart поддерживает несколько вариантов загрузки данных в диаграммы. Набор данных для нашего линейного графика довольно прост и совсем не велик. Так что мы можем просто включить его в сам код.

Для этого мы создаем функцию, которая будет возвращать данные, чтобы хранить их как отдельный блок кода.

function getData() {
  return [
    ['1990',12],
    ['1991',14],
    ['1993',21],
    ['1994',21],
    ['1996',26],
    ['1998',26],
    ['2000',27],
    ['2002',31],
    ['2004',29],
    ['2006',31],
    ['2008',36],
    ['2010',41],
    ['2012',42],
    ['2014',48],
    ['2016',50],
    ['2018',57]
  ];
}

Вся подготовка завершена, и теперь пришло время создать линейную диаграмму с помощью нескольких строк кода JavaScript!

4. Написание кода построения линейных диаграмм на JS.

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

Мы настраиваем данные, вызывая функцию, которую мы создали на предыдущем шаге, а затем сопоставляем данные, чтобы указать, что первый параметр для каждой точки данных - это значение X, а второй параметр - значение Y. Затем мы вызываем функцию line(), чтобы создать линейный график JS.

// create a data set on our data
var dataSet = anychart.data.set(getData());
// map data for the line chart,
// take x from the zero column and value from the first column
var seriesData = dataSet.mapAs({ x: 0, value: 1 });
// create a line chart
var chart = anychart.line();

Теперь мы устанавливаем заголовки для линейного графика и оси Y.

// configure the chart title text settings
chart.title('Acceptance of same-sex relationships in the US over the last 2 decades');
// set the y axis title
chart.yAxis().title('% of people who accept same-sex relationships');

Наконец, мы загружаем сопоставленные данные в линейную диаграмму, устанавливаем идентификатор контейнера и рисуем график.

// create a line series with the mapped data
var lineChart = chart.line(seriesData);
// set the container id for the line chart
chart.container('container');
// draw the line chart
chart.draw();

Вуаля! Создана функциональная интерактивная линейная диаграмма на основе JavaScript! Это было довольно быстро и просто, не так ли?

Посмотрите на результат ниже, и вы можете увидеть эту диаграмму и поиграть с ее кодом на AnyChart Playground.

Что нам говорит эта линейная диаграмма? Мы ясно видим положительные изменения с течением времени и то, как признание однополых отношений в Соединенных Штатах постепенно увеличивалось в период с 1990 по 2018 год всего с несколькими небольшими паузами.

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

Теперь приготовьтесь создать потрясающую многолинейную диаграмму, которая будет визуализировать разбивку по возрасту!

Создание интерактивной многосерийной линейной диаграммы JS

Когда есть отдельные данные, мы используем многосерийную линейную диаграмму, чтобы указать каждый сегмент как отдельную линию. Посмотрим, как это делается!

Базовый код остается прежним. Но вместо одной серии мы создадим несколько серий. Конечно, теперь данные будут содержать несколько точек данных за каждый год, поскольку мы разбиваем общий процент «Совершенно верно» по возрастным группам: 18–34, 35–49, 50–64 и 65+.

function getData() {
  return [
    ['1990',16.9,12.2,10.2,5.2],
    ['1991',17,17.8,10,4.8],
    ['1993',26.5,23.8,16.8,6.6],
    ['1994',28.7,22,17.3,9.1],
    ['1996',35.7,24,22.6,9.2],
    ['1998',37.2,24.6,22.4,11.2],
    ['2000',36.5,26.2,23.7,9.9],
    ['2002',40,34.4,23.8,16.4],
    ['2004',33.3,28.8,32.5,14.3],
    ['2006',40.2,32.1,27.5,15.1],
    ['2008',49.3,37.2,31.4,17.1],
    ['2010',51.9,42.5,36.1,28.5],
    ['2012',53.1,43.8,36,24.6],
    ['2014',63.7,45.9,44.7,31.3],
    ['2016',66.3,52,42.3,37.2],
    ['2018',70.1,57.7,49.2,39]
  ];
}

Нам нужно будет создать разные сопоставления данных для каждой серии.

// map data for the first series,
// take x from the zero column and value from the first column
var firstSeriesData = dataSet.mapAs({ x: 0, value: 1 });
// map data for the second series,
// take x from the zero column and value from the second column
var secondSeriesData = dataSet.mapAs({ x: 0, value: 2 });
// map data for the third series,
// take x from the zero column and value from the third column
var thirdSeriesData = dataSet.mapAs({ x: 0, value: 3 });
  
// map data for the fourth series,
// take x from the zero column and value from the fourth column
var fourthSeriesData = dataSet.mapAs({ x: 0, value: 4 });

Затем мы связываем каждую из этих серий с отдельной строкой и называем каждую серию на основе сегментов.

// create the first series with the mapped data
var firstSeries = chart.line(firstSeriesData);
firstSeries.name('18-34');
// create the second series with the mapped data
var secondSeries = chart.line(secondSeriesData);
secondSeries.name('35-49');
// create the third series with the mapped data
var thirdSeries = chart.line(thirdSeriesData);
thirdSeries.name('50-64');
  
// create the fourth series with the mapped data
var fourthSeries = chart.line(fourthSeriesData);
fourthSeries.name('65+');

Здесь, поскольку у нас есть несколько линий, изображенных на нашем линейном графике JS, нам нужна легенда, которая поможет определить, какая линия представляет какой сегмент. Не волнуйтесь, в этом нет ничего сложного. Легенда диаграммы автоматически создается библиотекой JS, и нам просто нужно ее включить.

// turn the legend on
chart.legend().enabled(true);

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

Опять же, мы можем отчетливо понять, насколько позитивна общая тенденция во всех возрастных группах, особенно в молодом поколении.

Настройка дизайна многосерийной линейной диаграммы JS

Линейная диаграмма с несколькими сериями выглядит великолепно как есть, но мы можем сделать ее еще лучше с некоторыми настройками! AnyChart великолепен в этом отношении, потому что он предлагает множество готовых опций, позволяющих с легкостью изменять подобные диаграммы JS (HTML5).

Итак, давайте сделаем несколько быстрых настроек, чтобы получить более информативное представление о данных.

1. Сглаживание линий.

Как мы видим, линии, сформированные в настоящее время, являются резкими в местах соединения и создают более геометрическое ощущение. В библиотеке AnyChart JS мы можем получить более плавные линии, просто заменив «линию» на «сплайн» при связывании данных с серией.

// create the first series with the mapped data
var firstSeries = chart.spline(firstSeriesData);
firstSeries.name('18-34');
// create the second series with the mapped data
var secondSeries = chart.spline(secondSeriesData);
secondSeries.name('35-49');
// create the third series with the mapped data
var thirdSeries = chart.spline(thirdSeriesData);
thirdSeries.name('50-64');
  
// create the fourth series with the mapped data
var fourthSeries = chart.spline(fourthSeriesData);
fourthSeries.name('65+');

После этих простых изменений наша линейная диаграмма становится сплайн-диаграммой!

2. Добавление перекрестия при наведении курсора для каждой точки данных.

Поскольку линии в нашей визуализации теперь гладкие, отображение перекрестия при наведении курсора на линии может улучшить читаемость. Также легко настроить поведение прицела. В этом случае, например, оставим только соединитель оси X и этикетку.

// turn on the crosshair
chart.crosshair().enabled(true).yLabel(false).yStroke(null);

Взгляните на интерактивную сплайн-диаграмму JavaScript с перекрестием! Он доступен на AnyChart Playground.

В конечном счете, для окончательной диаграммы этого руководства по линейной диаграмме JS давайте продолжим с прямыми линиями вместо плавных кривых. Но мы все равно оставим прицел.

3. Улучшение всплывающей подсказки линейного графика JS.

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

Это можно просто сделать, установив функцию format() для всплывающей подсказки в каждой серии строк. Вот пример первого:

firstSeries
  .tooltip()
  .format("Age group 18-34 : {%value}%");

4. Изменение цвета и другой эстетики.

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

Давайте также сделаем линии немного толще, чтобы они выглядели более выраженными. Изменить цвет и ширину линии можно вместе с помощью атрибута stroke в настройках каждой серии. Нравится:

firstSeries
  .stroke('3 #f49595')

Наконец, мы добавляем простую анимацию, чтобы оживить линейную диаграмму, что снова делается очень легко, поскольку в библиотеке JavaScript она есть в качестве встроенной функции.

// turn on the line chart animation
chart.animation(true);

Это сделано! Потрясающая интерактивная линейная диаграмма JavaScript завершена!

Для вашего удобства окончательный код линейной диаграммы HTML / CSS / JS находится под визуализацией. Не стесняйтесь проверить это на AnyChart Playground и, возможно, примените свои данные и другие изменения.

<html>
  <head>
    <title>JavaScript Line Chart</title>
      <script src="https://cdn.anychart.com/releases/8.10.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>
anychart.onDocumentReady(function () {
  // create a data set on our data
  var dataSet = anychart.data.set(getData());
  
  // map data for the first series,
  // take x from the zero column and value from the first column
  var firstSeriesData = dataSet.mapAs({ x: 0, value: 1 });
  // map data for the second series,
  // take x from the zero column and value from the second column
  var secondSeriesData = dataSet.mapAs({ x: 0, value: 2 });
 
  // map data for the third series,
  // take x from the zero column and value from the third column 
  var thirdSeriesData = dataSet.mapAs({ x: 0, value: 3 });
  
  // map data for the fourth series,
  // take x from the zero column and value from the fourth column
  var fourthSeriesData = dataSet.mapAs({ x: 0, value: 4 });
  // create a line chart
  var chart = anychart.line();
  // turn on the line chart animation
  chart.animation(true);
  
  // configure the chart title text settings
  chart.title('Acceptance of same-sex relationships in the US over the last 2 decades');
  // set the y axis title
  chart.yAxis().title('% of people who accept same-sex relationships');
  
  // turn on the crosshair
  chart.crosshair().enabled(true).yLabel(false).yStroke(null);
  // create the first series with the mapped data
  var firstSeries = chart.line(firstSeriesData);
  firstSeries
    .name('18-34')
    .stroke('3 #f49595')
    .tooltip()
    .format("Age group 18-34 : {%value}%");
  
  // create the second series with the mapped data
  var secondSeries = chart.line(secondSeriesData);
  secondSeries
    .name('35-49')
    .stroke('3 #f9eb97')
    .tooltip()
    .format("Age group 35-49 : {%value}%");
  // create the third series with the mapped data
  var thirdSeries = chart.line(thirdSeriesData);
  thirdSeries
    .name('50-64')
    .stroke('3 #a8d9f6')
    .tooltip()
    .format("Age group 50-64 : {%value}%");
  
  // create the fourth series with the mapped data
  var fourthSeries = chart.line(fourthSeriesData);
  fourthSeries
    .name('65+')
    .stroke('3 #e2bbfd')
    .tooltip()
    .format("Age group 65+ : {%value}%");
  // turn the legend on
  chart.legend().enabled(true);
  // set the container id for the line chart
  chart.container('container');
  
  // draw the line chart
  chart.draw();
});
function getData() {
  return [
    ['1990',16.9,12.2,10.2,5.2],
    ['1991',17,17.8,10,4.8],
    ['1993',26.5,23.8,16.8,6.6],
    ['1994',28.7,22,17.3,9.1],
    ['1996',35.7,24,22.6,9.2],
    ['1998',37.2,24.6,22.4,11.2],
    ['2000',36.5,26.2,23.7,9.9],
    ['2002',40,34.4,23.8,16.4],
    ['2004',33.3,28.8,32.5,14.3],
    ['2006',40.2,32.1,27.5,15.1],
    ['2008',49.3,37.2,31.4,17.1],
    ['2010',51.9,42.5,36.1,28.5],
    ['2012',53.1,43.8,36,24.6],
    ['2014',63.7,45.9,44.7,31.3],
    ['2016',66.3,52,42.3,37.2],
    ['2018',70.1,57.7,49.2,39]
  ];
}

Заключение

Линейный график - это очень функциональная и практичная форма визуализации данных. Используется довольно часто. Поэтому я подумал, что вам будет интересно узнать, как без проблем создать линейную диаграмму. Использование библиотеки диаграмм JavaScript, такой как AnyChart, - это удобный способ не только быстро создавать как красивые, так и информативные линейные диаграммы, но и добавлять некоторые настройки, позволяющие легко адаптировать визуализацию в соответствии с вашими конкретными потребностями.

Для более глубокого изучения того, как создавать и персонализировать линейные диаграммы JS, см. Документацию по линейным диаграммам. Кроме того, не упустите возможность ознакомиться с этими примерами линейных диаграмм для вдохновения.

Если у вас есть какие-либо вопросы о линейных диаграммах JavaScript, построенных в этом руководстве, или о типе линейных диаграмм в целом, или о каких-либо конкретных функциях, которые вы не знаете, как реализовать, оставьте их в комментариях, и я сделаю все возможное, чтобы давать своевременные ответы.

Давайте все будем гордиться тем, кто мы есть, и добавим эту диаграмму в набор навыков разработки визуализации данных, чтобы выставлять напоказ!

Команда AnyChart благодарит Shachee Swadia, внештатного дизайнера данных, за предоставление этого отличного руководства по JS Line Chart.

Свяжитесь с нами, если вы хотите создать крутой гостевой пост для нашего блога.

Ознакомьтесь с другими учебными пособиями по JavaScript.

Первоначально опубликовано на сайте anychart.com 28 июля 2021 г.

Больше контента на plainenglish.io