Как да създадете диаграма с подредени площи в JavaScript

Визуализиране на данните за COVID-19 за Италия, 31 януари — 9 юни

„Натрупаните диаграми с площи“, вариация на класическите „диаграми с площи“, са доста популярна форма за визуализация на данни. Те работят чудесно, за да представят графично как множество променливи и техните суми се „променят във времето“. В този урок ще ви покажа как лесно да създадете интерактивна диаграма с подредени области на JavaScript, която ще изглежда убедително във всеки HTML5 проект, уеб сайт или приложение.

За да демонстрирам този начин, който е доста лесен за овладяване, дори ако имате само основни умения за кодиране на HTML, ще визуализирам официални данни за избухването на пандемията от COVID-19 в Италия. Визуализациите, изградени по време на урока, ще покажат как се променя броят на случаите, възстановените и смъртните случаи - от 31 януари, когато бяха потвърдени първите два случая, до вчера, 9 юни, когато общият брой на случаите на коронавирус в Италия достигна 235,561.

4 стъпки за изграждане на JS наслагвани диаграми

Разработването на всяка JavaScript графика, включително диаграма с подредени площи, може да бъде разделена на следните четири основни стъпки:

Създайте HTML страница за диаграмата.
Добавете необходимите JavaScript файлове.
Задайте данните.
Напишете JS кода за диаграмата.

Нека започнем с изработването на основна, базирана на стойност JS подредена площна диаграма. След това ще ви покажа как да го персонализирате, за да отговаря на вашите нужди и задачи. Окончателният пример за визуализация на данни ще бъде следната диаграма с подредени площи в процента на JavaScript:

А сега да се заемем с работата!

Стъпка 1: Създайте HTML страница

Започнете със създаване на основна HTML страница. Тази страница трябва да съдържа следното:

Подходящо заглавие.
HTML блоков елемент (например <div>), който ще съхранява вашата диаграма.
Атрибут на id за <div> (например „контейнер“).

Имайте предвид, че можете също да добавите CSS правила в блока <style>, за да промените пространството, което ще заема вашата диаграма с подредени площи. Ако искате графиката да запълни цялата страница, използвайте 100% и за параметрите width и height.

HTML страницата трябва да изглежда така:

<!DOCTYPE html>
<html>
<head>
  <title>Stacked Area Chart</title>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<div id="container"></div>
</body>
</html>

Стъпка 2: Добавете необходимите JavaScript файлове

Сега трябва да посочите всички необходими JS файлове в секцията <head>.

Диаграмата с подредени площи, която ще ви покажа в този урок, е базирана на JS библиотеката на AnyChart. Като цяло JavaScript библиотеките ви позволяват да произвеждате желания резултат по-бързо и лесно. AnyChart е лек и гъвкав, така че можете да бъдете толкова креативни, колкото искате, и да излезете с напълно функционална и отзивчива диаграма, която да използвате на вашия уебсайт или приложение.

За този урок за диаграми ще включа съответните CDN връзки. Ако предпочитате, можете да изтеглите скриптовете локално.

JavaScript библиотеката AnyChart включва модулна система, която е полезна за оптимизиране на размера на JS кода, изпълняван на уеб страница. За да направите диаграма с подредени площи, като я използвате, добавете два модула: Core и Basic Cartesian. Първият е основният модул AnyChart, необходим за използване на всеки друг модул. Вторият модул захранва всички декартови диаграми.

Ето HTML кода за това, което имаме досега:

<!DOCTYPE html>
<html>
<head>
  <title>Stacked Area Chart</title>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-cartesian.min.js"></script>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    // The stacked area chart's JS code will be written here.
  </script>
</body>
</html>

Стъпка 3: Добавете данните за визуализиране

Заредете данните

Пандемията от COVID-19 е топ новинарската тема в световен мащаб. В този урок реших да се съсредоточа върху Италия, първата област извън Китай, която беше изключително засегната от тази криза. Ще визуализирам данни с броя на активните случаи, възстановилите се и смъртните случаи, за да видя как се развива ситуацията от началото на епидемията в Италия до момента.

Взех данни от „набора от данни“ на Johns Hopkins CSSE, който се счита за надежден източник на официална статистика за COVID-19. За по-голяма простота, поставих италианските данни в един CSV файл, който можете да намерите тук. Активните случаи са изчислени чрез изваждане на смъртните случаи и възстановяването от потвърдените случаи.

Зареждането на CSV файла в AnyChart може да се извърши с помощта на модула Адаптер на данни, който трябва да посочите в раздела <head> в допълнение към скриптовете на библиотеката, които вече са посочени там:

<!DOCTYPE html>
<html>
<head>
  <title>Stacked Area Chart</title>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-cartesian.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    // The stacked area chart's JS code will be written here.
  </script>
</body>
</html>

Сега можете да използвате метода loadCsvFile, предоставен от адаптера за данни, за да заредите CSV данните.

anychart.data.loadCsvFile ("https://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
});

След това „задайте данните“ да бъдат готови за използване във вашата бъдеща диаграма с подредени площи, базирана на JavaScript:

anychart.data.loadCsvFile ("https://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
  // set the data and ignore the first row that contains headers
  var dataSet = anychart.data.set(data, {ignoreFirstRow: true});
});

Карта на данните

Диаграмата ще показва данни от три полета: активни случаи, възстановени и смъртни случаи. Така че ще ви трябват три различни серии от данни, по една за всяко поле. Но как ще „информирате“ вашата диаграма кои данни да използвате за всяко поле?

Ето къде влиза в действие картографирането на данни! Наблюдавайте как това е имплементирано в кода чрез извикване на метода mapAs:

// map data for the deaths series
var deathsData = dataSet.mapAs({ 'x': 0, 'value': 2 });
// map data for the recovered series
var recoveredData = dataSet.mapAs({ 'x': 0, 'value': 3 });
// map data for the active series
var activeData = dataSet.mapAs({ 'x': 0, 'value': 4 });

Стъпка 4: Напишете JS кода за вашата диаграма

Сега, когато изглежда, че всичко е на мястото си, вие сте готови да започнете да кодирате визуализацията на диаграмата с подредени области на JS.

Първо добавете функцията anychart.onDocumentReady, която ще обгради целия код на диаграмата и ще се изпълни, когато страницата е готова.

<script>
anychart.onDocumentReady(function () {
  // The stacked area chart's code will be written here.
});
</script>

След това добавете данните от стъпка 3:

<script>
anychart.onDocumentReady(function () {
  anychart.data.loadCsvFile ("https://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
    // set the data and ignore the first row that contains headers
    var dataSet = anychart.data.set(data, {ignoreFirstRow: true});
  });
});
</script>

След това посочете типа на диаграмата, задайте серията и принудете диаграмата да подрежда стойности по Y скала:

// specify the area chart type
var chart = anychart.area();
// create a series with the mapped active data
var actSeries = chart.splineArea(activeData);
// create a series with the mapped recovered data
var recSeries = chart.splineArea(recoveredData);
// create a series with the mapped deaths data
var deathsSeries = chart.splineArea(deathsData);
// force the chart to stack values by the y scale
chart.yScale().stackMode('value');

За по-голяма яснота, нека да му дадем име и име на осите му (вижте съвети за писане на страхотни надписи на диаграмата, ако имате нужда от съвет):

// set the chart title
chart.title('Covid-19 in Italy');
// set the labels of the axes
chart.xAxis().title("Date");
chart.yAxis().title("Number of people");

Още нещо: искам също да добавя вертикална линия, която ще се движи с мишката, което трябва да улесни виждането къде какво е с един поглед. В AnyChart просто използвайте функцията crosshair. Следният код показва как може да се активира мерника с някои допълнителни стилове:

// turn on the crosshair
var crosshair = chart.crosshair();
crosshair.enabled(true)
  .yStroke(null)
  .xStroke('#fff')
  .zIndex(39);
crosshair.yLabel().enabled(false);

Накрая начертайте диаграмата, като я поставите в контейнера и използвате командата за рисуване.

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

Насладете се на резултата:

Резултатът дава представа за това как броят на активните случаи, възстановяването и смъртните случаи се променя с течение на времето. Общата сума включва всички потвърдени случаи. Можете да преместите мишката върху диаграмата и да видите точните стойности във всяка точка. Забележете как мерникът помага за разбирането на информацията за всеки ден!

За ваше удобство пълният код е по-долу. Чувствайте се свободни да играете с тази базова JS диаграма с подредени площи на AnyChart Playground.

<!DOCTYPE html>
<html>
<head>
  <title>Stacked Area Chart</title>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-cartesian.min.js"></script>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
anychart.onDocumentReady(function () {
  anychart.data.loadCsvFile("https://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) { 
    // set the data and ignore the first row that contains headers
    var dataSet = anychart.data.set(data, {ignoreFirstRow: true});
// map data for the deaths series
    var deathsData = dataSet.mapAs({ 'x': 0, 'value': 2 });
// map data for the recovered series
    var recoveredData = dataSet.mapAs({ 'x': 0, 'value': 3 });
// map data for the active series
    var activeData = dataSet.mapAs({ 'x': 0, 'value': 4 });
// specify the chart type
    var chart = anychart.area();
// create a series with the mapped active data
    var actSeries = chart.splineArea(activeData);
// create a series with the mapped recovered data
    var recSeries = chart.splineArea(recoveredData);
// create a series with the mapped deaths data
    var deathsSeries = chart.splineArea(deathsData);
// force the chart to stack values by the y scale
    chart.yScale().stackMode('value');
// set the chart title
    chart.title('Covid-19 in Italy');
// set the labels of the axes
    chart.xAxis().title("Date");
    chart.yAxis().title("Number of people");
// turn on the crosshair
    var crosshair = chart.crosshair();
    crosshair.enabled(true)
      .yStroke(null)
      .xStroke('#fff')
      .zIndex(39);
    crosshair.yLabel().enabled(false);
// set the container id for the chart
    chart.container('container');
// initiate chart drawing
    chart.draw();
  });
});
</script>
</body>
</html>

Персонализиране на диаграма с подредени области на JavaScript

Много е вероятно различните хора да предпочитат различни функционалности и естетика за своите диаграми, да не говорим за различни задачи, които можете да получите като уеб разработчик или дизайнер на визуализация на данни. За щастие JS диаграмите, поддържани от AnyChart, могат да бъдат модифицирани, за да отговарят на вашите нужди и предпочитания с друга лекота. Ще ви покажа как да извършите няколко бързи персонализации точно сега:

Добавете легенда и анимация.
Променете стойностите на проценти.
Конфигурирайте подсказката, маркерите и етикетите.
Промяна на цветовете.

Добавете легенда и анимация

Всяка диаграма, която показва повече от една стойност, трябва да има легенда, за да бъде четлива.

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

chart.legend(true);

Бих искал също така да придам на тази диаграма малко уау ефект, като добавя анимация. Можете бързо да направите това, като включите кратък ред към JavaScript кода на диаграмата:

chart.animation(true);

Вижте резултата и можете да намерите тази JS подредена площна диаграма с легенда и анимация на AnyChart Playground:

Променете стойностите на проценти

Сега нека превключим режима на подреждане от стойности към проценти. По този начин можете да визуализирате как съставът се променя независимо от общата сума.

Това е много просто. За да направите JavaScript (HTML5) диаграма с проценти подредени площи, визуализираща същите данни, просто заменете „стойност“ с „процент“:

// change the stacking mode to percent
chart.yScale().stackMode('percent');

Тази JS процентно подредена площна диаграма е достъпна на AnyChart Playground.

Конфигурирайте подсказката, маркерите и етикетите

Нека накараме диаграмата да показва заглавията на сериите в подсказката и легендата. Има много начини да направите това. Но също така искам да променя маркерите за точки. Така че нека създадем помощна функция, където можете да напишете кода, необходим за персонализиране на всички тези елементи:

// helper function to setup tooltip labels for all series and style markers
var setupSeriesLabels = function (series, name) {
  series.name(name)
};

Използвайте тази функция точно там, където настройвам поредицата, и добавете съответните заглавия:

// create a series with the mapped active data
var actSeries = chart.splineArea(activeData);
setupSeriesLabels(actSeries, 'Active');
// create a series with the mapped recovered data
var recSeries = chart.splineArea(recoveredData);
setupSeriesLabels(recSeries, 'Recovered');
// create a series with the mapped deaths data
var deathsSeries = chart.splineArea(deathsData);
setupSeriesLabels(deathsSeries, 'Deaths');

Сега отново използвайте помощната функция, за да стилизирате маркерите. Това, което ще направя, е да направя всички кръгове, да им дам конкретен размер и да посоча теглото и цвета на чертата им. Накрая ще уточня и техните, така че да се показват в предното ниво.

Ето кода:

// helper function to setup series and give them appropriate names in order to distinguish and label them properly
var setupSeries = function (series, name) {
  series.name(name)
  // setting the markers
  series.hovered().stroke('3 #fff 1');
  series.hovered().markers()
    .enabled(true)
    .type('circle')
    .size(4)
    .stroke('1.5 #fff');
  series.markers().zIndex(100);
};

Резултатът от диаграмата след тези промени е както следва:

Можете да отворите тази персонализирана JS диаграма с проценти подредени площи на AnyChart Playground.

Промяна на цветовете

И накрая, искам да променя цветовете на диаграмата до нещо, което има повече смисъл за мен. Ще сложа червен цвят за смъртни случаи, зелен за възстановяване и син за активни случаи. Чувствайте се свободни да измислите свои собствени идеи!

Ето кода:

// create a series with the mapped active series
var actSeries = chart.splineArea(activeData)
.fill("#1E8FCD")
.stroke("#4b9bc6")
setupSeries(actSeries, 'Active');
// create a series with the mapped recovered data
var recSeries = chart.splineArea(recoveredData)
.fill("#B3C67D")
.stroke("#b9c1a0")
setupSeries(recSeries, 'Recovered');
// create a series with the mapped deaths data
var deathsSeries = chart.splineArea(deathsData)
.fill("#b3315d")
.stroke("#b5617d")
setupSeries(deathsSeries, 'Deaths');

Вижте окончателната интерактивна диаграма с проценти подредени области на JavaScript, която показах в GIF в самото начало:

Можете да намерите целия код на тази визуализация на данни по-долу и окончателната JS диаграма с проценти подредени площи на AnyChart Playground:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Stacked Area Chart</title>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
  <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-cartesian.min.js"></script>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="container"></div>
    <script>
anychart.onDocumentReady(function () {
  anychart.data.loadCsvFile("https://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
    // set the data and ignore the first row that contains headers
    var dataSet = anychart.data.set(data, {ignoreFirstRow: true});
// map data for the deaths series
    var deathsData = dataSet.mapAs({ 'x': 0, 'value': 2 });
// map data for the recovered series
    var recoveredData = dataSet.mapAs({ 'x': 0, 'value': 3 });
// map data for the active series
    var activeData = dataSet.mapAs({ 'x': 0, 'value': 4 });
// specify the area chart type
    var chart = anychart.area();
// helper function to setup series and give them appropriate names in order to distinguish and label them properly
    var setupSeries = function (series, name) {
      series.name(name)
      // setting the markers
      series.hovered().stroke('3 #fff 1');
      series.hovered().markers()
        .enabled(true)
        .type('circle')
        .size(4)
        .stroke('1.5 #fff');
      series.markers().zIndex(100);
    };
// create a series with the mapped active data
    var actSeries = chart.splineArea(activeData)
    .fill("#1E8FCD")
    .stroke("#4b9bc6")
    setupSeries(actSeries, 'Active');
// create a series with the mapped recovered data
    var recSeries = chart.splineArea(recoveredData)
    .fill("#B3C67D")
    .stroke("#b9c1a0")
    setupSeries(recSeries, 'Recovered');
// create a series with the mapped deaths data
    var deathsSeries = chart.splineArea(deathsData)
    .fill("#b3315d")
    .stroke("#b5617d")
    setupSeries(deathsSeries, 'Deaths');
    
    // force the chart to stack values by the y scale
    chart.yScale().stackMode('percent');
// set the chart title
    chart.title('Covid-19 in Italy');
// set the labels of the axes
    chart.xAxis().title("Date");
    chart.yAxis().title("Number of people");
// turn on the crosshair
    var crosshair = chart.crosshair();
    crosshair.enabled(true)
      .yStroke(null)
      .xStroke('#fff')
      .zIndex(39);
    crosshair.yLabel().enabled(false);
// turn on the legend
    chart.legend(true);
// turn on the chart animation
    chart.animation(true);
// set the container id for the chart
    chart.container('container');
// initiate chart drawing
    chart.draw();
  });
});
</script>
</body>
</html>

Заключение

Честито! Току-що изградихте първите си диаграми с подредени области на JavaScript! Процесът не е наистина труден, нали?

Продължавайте да учите, докато е горещо. Вижте документацията. Вижте още няколко примера за подредени диаграми с площи в галерията с диаграми с площи за вдъхновение. Чувствайте се свободни да споделяте собствените си творения и да задавате въпросите си в коментарите 😉

Вижте също: Как да създадете JavaScript диаграма с площи

Първоначално публикувано в https://www.anychart.com на 10 юни 2020 г.