Рубрики
Без рубрики

Как создать расходящуюся гистограмму с помощью библиотеки диаграммы JavaScript

Эта статья представляет собой пошаговое руководство, которое покажет вам, как создать интерактивный диапазон диапазона JavaScript, которая визуализирует 20 лет производительности La Lakers с Kobe Bryant. 2020 год был довольно буровым по очевидным причинам. Но даже перед пандемией год начался на грустной записке

Автор оригинала: FreeCodeCamp Community Member.

Эта статья представляет собой пошаговое руководство, которое покажет вам, как создать интерактивный диапазон диапазона JavaScript, которая визуализирует 20 лет производительности La Lakers с Kobe Bryant.

2020 год был довольно буровым по очевидным причинам. Но даже перед пандемией год начался на грустной записке со смертью баскетбольной легенды Коби Брайант Отказ Он был звездой Спортсмена НБА, который играл в течение 20 лет с одной и только одной командой – ЛОС-Анджелесские Лейкерс.

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

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

Что такое расходящийся барной диаграммой?

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

Расходящаяся гистограмма показывает две или более меры, которые нанесены с средней базовой линии, продлеваются вправо, так и налево (горизонтальные батончики диапазона) или верхней и нижней (столбцы вертикального диапазона).

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

В этом руководстве я использую расходящуюся технику диаграммы гистограммы, чтобы продемонстрировать победы и убытки La Lakers через 20 лет карьеры Кобе Брайанта.

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

Как построить диаграмму удивления JavaScript в 4 основных шагах

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

Я выбрал один под названием AnyChart Чтобы создать эту расходящуюся гистограмму. Эта библиотека JS Charting появилась для поддержки (особенно полезной в этом случае) диапазона диапазона из коробки, и была также достаточно гибкой, чтобы сделать то, что я хотел.

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

Конечно, имея хорошие навыки HTML и JavaScript дают вам преимущество при визуализации данных в Интернете. Но в любом случае, лучшее представление о использовании хороших библиотек Charting состоит в том, что они делают его вполне непростым для создания интерактивных графиков даже без особого опыта.

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

  1. Создайте HTML-страницу.
  2. Ссылка необходимых файлов JS.
  3. Установите данные.
  4. Напишите код JS для диаграммы.

Давайте подробно пройдемся через каждый шаг.

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

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

Позже в коде мы также должны дать ему атрибут ID (пусть он будет «контейнер»).


  
    JavaScript Diverging Bar Chart
    
  
  
    

Обратите внимание, что можно указать параметры ширины и высоты внутри <СТИЛЬ> Блок, чтобы изменить пространство, которое будет займет ваша диаграмма. Я поставил 100% в обоих параметрах, чтобы диаграмма заполняет всю страницу.

2. Включите необходимые файлы JavaScript

Затем нам нужно добавить сценарии библиотеки Charting, которые помогут создать визуализацию данных. Поскольку мы работаем с библиотекой AnyChart здесь, давайте включаем соответствующие файлы из его CDN Отказ (Имейте в виду, что вы всегда можете скачать скрипты, если хотите.)

Для расходящейся гистограммы, нам нужны Базовый модуль скрипт который должен быть добавлен к Раздел HTML-страницы.


  
    JavaScript Diverging Bar Chart
    
    
  
    
    

3. Добавьте данные

Я хотел визуализировать количество побед и потерь команды La Lakers во всех сезонах с 1996 по 2016 год. Итак, я получил данные из Сайт NBA И создал массив с года, побеждает и потери.

Поскольку количество данных не огромно, мы можем добавить его так:

var winlossData = [
  [65, 17, "2015-16"],
  [61, 21, "2014-15"],
  [55, 27, "2013-14"],
  [37, 45, "2012-13"],
  [25, 41, "2011-12"],
  [25, 57, "2010-11"],
  [25, 57, "2009-10"],
  [17, 65, "2008-09"],
  [25, 57, "2007-08"],
  [40, 42, "2006-07"],
  [37, 45, "2005-06"],
  [48, 34, "2004-05"],
  [26, 56, "2003-04"],
  [32, 50, "2002-03"],
  [24, 58, "2001-02"],
  [26, 56, "2000-01"],
  [15, 67, "1999-00"],
  [19, 31, "1998-99"],
  [21, 61, "1997-98"],
  [26, 56, "1996-97"]
];

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

4. Напишите код JavaScript для вашей графика

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

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

Во-первых, мы создаем гистограмму и вводите данные, все внутри прилагающего anyChart.ondocumentready () функция.

// create a bar chart
var chart = anychart.bar();

// data
var winlossData = [
  [65, 17, "2015-16"],
  [61, 21, "2014-15"],
  [55, 27, "2013-14"],
  [37, 45, "2012-13"],
  [25, 41, "2011-12"],
  [25, 57, "2010-11"],
  [25, 57, "2009-10"],
  [17, 65, "2008-09"],
  [25, 57, "2007-08"],
  [40, 42, "2006-07"],
  [37, 45, "2005-06"],
  [48, 34, "2004-05"],
  [26, 56, "2003-04"],
  [32, 50, "2002-03"],
  [24, 58, "2001-02"],
  [26, 56, "2000-01"],
  [15, 67, "1999-00"],
  [19, 31, "1998-99"],
  [21, 61, "1997-98"],
  [26, 56, "1996-97"]
];

Далее мы создаем функцию, которая принимает два параметра – номер столбца и имя. Номер столбца указывает столбец в наборе данных, и имя указывает на серию. В нашем случае у нас есть две серии – один для количества победы и один для количества потерь.

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

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

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

var createSeries = function (columnNumber, name) {
  var data = [];
  for (var i = 0; i < winlossData.length; i++) {
    var value = winlossData[i][columnNumber];
    var center = 0;
    if (name === "Wins") {
      data.push({
        x: winlossData[i][2],
        low: center,
        high: center + value,
        value: value
      });
    } else {
      data.push({
        x: winlossData[i][2],
        low: -center,
        high: -center - value,
        value: value
      });
    }
  }
    
  var series = chart.rangeBar(data);
  series.name(name);
};

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

createSeries(0, "Losses");
createSeries(1, "Wins");

Это перерыв и самые сложные детали закончились! Теперь у нас просто установка графика.

Добавьте заголовок на расходящуюся диаграмму бар:

chart
  .title()
  .enabled(true)
  .text("20 Years of LA Lakers Win-Loss Record with Kobe Bryant (1996-2016)");

И включить легенду графика:

chart
  .legend()
  .enabled(true);

Чтобы получить победы и убытки для каждого года, отображаются рядом друг с другом, мы должны преобразовать диаграмму гистограммы Multi-Series в сложенную гистограмму. Далее, чтобы подчеркнуть расхождение, давайте добавим линейную маркер на 0. Наконец, мы назначаем контейнер Div и нарисовать диаграмму:

// create a stacked bar chart from the multi-series bar chart
chart.yScale().stackMode("value");

// set a container id for the chart
chart.container("container");
  
// initiate chart drawing
chart.draw();

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

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

Взгляните на эту первоначальную версию расходящейся гистограммы с полным кодом JS/CSS/HTML на кодепене .


  
    JavaScript Diverging Bar Chart
    
    
  
    
    

Как настроить свой JavaScript расходящийся барной диаграммы

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

Теперь я добавлю 3-указатель и настраиваю график, чтобы улучшить некоторые его функциональности и эстетики.

1. Основные настройки стиля и осей

Для начала, давайте изменим немного базового стиля и настроек для осей X и Y, чтобы сделать вещи более читаемыми.

Просто помните, что в AnyChart, A диапазон диаграммы диаграммы вертикальная версия диапазон столбец диаграммы Отказ Следовательно, на нашем расходящемся гистограмме горизонтальная ось представляет собой ось Y, а вертикальная ось называется ось X.

Итак, давайте избавимся от клещей, настройте заголовок оси и настройте этикетки на вертикальную ось. Мы также установим 80 как максимум и удалить минус знак с меток на горизонтальной оси:

chart
  .xAxis()
  .ticks(false);
chart
  .xAxis()
  .title()
  .enabled(true)
  .text("Years")
  .padding([0, 0, 10, 0]);
chart
  .xAxis()
  .labels()
  .fontSize(11)
  .fontColor("#474747")
  .padding([0, 10, 0, 0]);
chart.yScale().maximum(80);
chart
  .yAxis(0)
  .labels()
  .format(function () {
    return Math.abs(this.value);
  });

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

// add the stroke by setting it in this line
series.name(name).stroke("3 #fff 1");

...

// create a line marker at 0
chart
  .lineMarker()
  .value(0)
  .stroke("#CECECE");

Ах, не похожи на график более полированной и легче читать сейчас?

Ознакомьтесь с кодом для этой версии расходящейся диаграммы гистограммы на кодепене .

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

Кроме того, абсолютные значения представляют, когда Лейкерс сыграл больше или меньше игр через год. В конечном итоге, почему я решил сохранить абсолютные ценности. Но вы можете проверить версию с процентами на кодепене Отказ

Ну, давайте перейдем к этому пропущенному выстрел и обратно в режим фокусировки.

2. Настройка подсказки

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

Здесь я также получил представление о демонстрации ранее расчетных процентных значений (см. Пример от отступления чуть выше) в качестве дополнительной информации в подсказке нашей расходной гистограммы.

Таким образом, первый шаг - реализовать расчет процентных значений:

// calculate percentages for the tooltip
var val = winlossData[i][columnNumber] * 100;
if (columnNumber == 0) {
  var percentValue =
    val / (winlossData[i][columnNumber] + winlossData[i][columnNumber + 1]);
} else {
  var percentValue =
    val / (winlossData[i][columnNumber] + winlossData[i][columnNumber - 1]);
}
percentValue = percentValue.toFixed(2);

Процентный расчет становится частью функции конфигурации серии - посмотрите, как он находится там:

// configure a function to create series
var createSeries = function (columnNumber, name) {
  var data = [];
  for (var i = 0; i < winlossData.length; i++) {

    // calculate percentages for the tooltip
    var val = winlossData[i][columnNumber] * 100;
    if (columnNumber == 0) {
      var percentValue =
        val / (winlossData[i][columnNumber] + winlossData[i][columnNumber + 1]);
    } else {
      var percentValue =
        val / (winlossData[i][columnNumber] + winlossData[i][columnNumber - 1]);
    }
    percentValue = percentValue.toFixed(2);     
      
    var value = winlossData[i][columnNumber];
    var center = 0;
    if (name === "Wins") {
      data.push({
        x: winlossData[i][2],
        low: center,
        high: center + value,
        value: value,
        // add the calculated percentage value
        percentValue: percentValue
      });
    } else {
      data.push({
        x: winlossData[i][2],
        low: -center,
        high: -center - value,
        value: value,
        // add the calculated percentage value
        percentValue: percentValue
      });
    }
  }

Тогда у нас есть дополнительное форматирование подсказки, чтобы все выглядеть аккуратно и красиво:

// customize the tooltip
chart
  .tooltip()
  .useHtml(true)
  .fontSize(12)
  .titleFormat(function () {
    return this.getData("x") + " " + this.seriesName;
  })
  .format(function () {
    return (
      "
Total games: " + "" + this.getData("value") + "
" + "
Percentage games: " + "" + this.getData("percentValue") + " %
" ); });

3. Изменение цветовой палитры

Ну, эта последняя настройка определенно является кинжалом - выстрел, который собирается сделать график совершенно потрясающе и выиграть игру! Это просто изменение цветовой палитры, чтобы соответствовать точкам джерси La Lakers. Так просто:

chart.palette(
  anychart.palettes.distinctColors().items(["#FDB827", "#542583"])
);

Вы видите, в самом последнюю секунду я также отключил режим выбора, добавив соответствующую команду на эту строку:

series.name(name).stroke("3 #fff 1").selectionMode("none");

Хорошо! Этот последний интерактивный диапазон диапазона диапазона JavaScript доступен на кодепене .

На всякий случай, полный код для HTML-страницы здесь прямо здесь:


  
    JavaScript Diverging Bar Chart
    
    
  
    
    

Заключение

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

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

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