Jeśli prześledzilibyśmy to, jak rozwijały się przez lata strony internetowe, bez problemu zauważylibyśmy, jak zmieniała się ich zawartość. Elementy graficzne i multimedialne stawały się coraz istotniejsze. Podczas projektowania strony nie powinno się o nich zapominać.

W przypadku omawianej jako przykład witryny prezentującej przepis, przygotujemy wizualizację wartości odżywczych w formie graficznej. Zrobimy to w kilku krokach.

Przygotowanie danych do wizualizacji

Pierwszym krokiem jest znalezienie właściwych danych. Pomóc mogą ci tabele wartości odżywczych, które znajdziesz w sieci. Pamiętaj, by upewnić się, że przygotowane przez ciebie wartości mają ujednolicone jednostki, są uporządkowane w logiczne grupy, etc. Przemyśl również to, jakie występują pomiędzy nimi powiązania.

Wybór formy prezentacji informacji

Odpowiedzmy sobie na kilka pytań:

• Jakie dane chcemy przedstawić?

• Jaki jest typ oraz struktura danych?

• Ile informacji chcemy przedstawić?

W przypadku omawianego projektu są to dane liczbowe, które wskazują zawartość czterech różnych składników odżywczych w daniu. W czytelny sposób można je przestawić za pomocą tabeli czy prostego wykresu (np. kołowego).

Prezentowanie informacji

Tabela

Wiemy, jakie dane chcemy zaprezentować, ujednoliciliśmy również jednostki.

Kolejnym etapem jest zbudowanie właściwej tabeli.

Tabele można przygotować samodzielnie. Możesz również skorzystać z gotowych rozwiązań.

Zarzutem związanym z wykorzystywaniem tabel jest to, że nie są one responsywneresponsywnośćresponsywne. Istnieją jednak gotowe rozwiązania, które pozwalają temu zaradzić. Jednym z nich jest plugin Stacktable.js. Więcej o responsywności dowiesz się w jednym z kolejnych e‑materiałów z tego kursu.

Wdrożenie pluginu na stronie zaczynamy od uzupełnienia jego źródła w sekcji nagłówkowej w pliku html.

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/stacktable.is"></script>

Następnie przygotujmy tabelę. Najważniejsze wykorzystane tagi:

• <table> – znacznik otwarcia i zamknięcia, w którym zagnieżdżona jest cała tabela,

• <thead> – znacznik wskazujący na sekcję nagłówkową tabeli,

• <tr> – znacznik zawierający wiersze,

• <th> – znacznik zawierający kolumny w części nagłówkowej,

• <td> – znacznik zawierający kolumny.

<table class="table table-bordered table-hover">
    <thead>
    <tr>
        <th class="title-head">Wartości odżywcze</th>
        <th>w 100 g</th>
    </tr>
    </thead>
    <tbody>
    <tr>
         <td>Tłuszcz</td>
         <td>11,21 g </td>
    </tr>
    <tr>
         <td>Węglowodany</td>
         <td>38,43 g</td>
    </tr>
    <tr>
         <td>Białko</td>
         <td>4,85 g</td>
    </tr>
    <tr>
         <td>Pozostałe</td>
         <td>45,51 g</td>
    </tr>
    </tbody>
</table>

Następnie, korzystając z jQuery, wywołajmy funkcję, która dba o responsywność tabeli. Umieszczamy to w pliku Java Script.

//table
$('table').stacktable();

Ostatnim etapem w tej części działań jest dodanie do tabeli stylów, które przedstawią dane zgodnie z zaplanowaną wizją pasującą do strony.

Przykładowe style mogą być zapisane w następujący sposób:

.stacktable { width: 50%; }
.st-head-row { padding-top: lem; }
.st-head-row.st-head-row-main { font-size: 1.5em; padding-top: 0; }
.st-key { width: 49%; text-align: right; padding-right: 1%; }
.st-val { width: 49%; padding-left: 1%; }

/* RESPONSIVE EXAMPLE */
.stacktable.large-only { display: table; }
.stacktable.small-only { display: none; }

@media (max-width: 800px) {
	.stacktable.large-only { display: none; }
    .stacktable.small-only { display: table; }
    .stacktable { width: 100%}
 }
 
 table caption {
 	 padding: .5em 0;
}

.title-head {
	text-align: left;
    padding-top: 1rem;
}

.main-table {
	display: flex;
    justify-content: center;
    margin-top: 2rem;
 }

Testujemy wprowadzone zmiany.

@media (min-width: 992px) {
	tr td:last-child, tr th:last-child {
    	text-align: right;
    }
}

Wyświetlanie na komputerze:

Ro0884lwHL8dp

Na zrzucie ekranu po lewej stronie znajduje się nagłówek: Wartości odżywcze, pod którym wypisano: Tłuszcz, Węglowodany, Białko, Pozostałe.
Po prawej stronie znajduje się nagłówek: w 100g, pod którym wypisano: 11,21g, 38,43 g, 4,85 g, 45,51 g.

Wyświetlanie na urządzeniu mobilnym:

R6ep8AlC9r1vR

Na zrzucie ekranu znajdują się napisy.
Na samej górze znajduje się największy napis: Wartości odżywcze.
Poniżej wypisano pogrubione: Tłuszcz, a następnie: w 100 g 11,21 g.
Poniżej wypisano pogrubione: Węglowodany, a następnie: w 100 g 38,43 g.
Poniżej wypisano pogrubione: Białko, a następnie: w 100 g 4,85 g.
Poniżej wypisano pogrubione: Pozostałe, a następnie: w 100 g 45,51 g.

Wykres

Chcesz na swojej stronie umieścić wykres, mapę czy oś czasu? Dobrym pomysłem może być wykorzystanie tego, co oferuje biblioteka amCharts. Rozwiązanie jest darmowe, pod warunkiem, że przy komponencie umieścimy logo amCharts.

Ostatecznie wybieramy wykres typu donut.

Po zapoznaniu się z dokumentacją wiemy, że wprowadzenie tego wykresu wiąże się z dodaniem kodu w pliku html i Java Script.

Do sekcji <head> dodajemy źródła.

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

W pliku html w części <body> definiujemy również sekcję div o id=”chartdiv”. W tym miejscu po uzupełnieniu kodu w pliku Java Script na stronie będzie wyświetlał się wykres.

<div id="chartdiv"></div>

Dodajmy kod, który wywołuje funkcję generującą wykres.

Kolejne informacje zawarte w przykładowym kodzie z dokumentacji dotyczą konfiguracji wykresu. Dzięki temu m.in. dane wyświetlą się w formie wykresu typu donut, a po lewej stronie będzie widoczna legenda.

//chart
am4core.ready(function() {

	// Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end
    
    // Create chart instance
    var chart = am4core.create("chartdiv", am4charts.PieChart);
    
    // Add data
    chart.data = [{
    	"wartosci-odzywcze": "Tłuszcz",
        "numbers": 501.9
	}, {
    	"wartosci-odzywcze": "Węglowodany",
        "numbers": 301.9
    }, {
    	"wartosci-odzywcze": "Białko",
        "numbers": 165.8
    }];
    
    // Add and configure Series
    var pieSeries = chart.series.push(new am4charts.PieSeries());
    pieSeries.dataFields.value = "numbers";
    pieSeries.dataFields.category = "wartosci-odzywcze";
    pieSeries.innerRadius = am4core.percent(50);
    pieSeries.ticks.template.disabled = true;
    pieSeries.labels.template.disabled = true;
    
    
    
    var rgm = new am4core.RadialGradientModifier();
    rgm.brightnesses.push(-0.8, -0.8, -0.5, 0, - 0.5);
    pieSeries.slices.template.fillModifier = rgm;
    pieSeries.slices.template.strokeModifier = rgm;
    pieSeries.slices.template.strokeOpacity = 0.4;
    pieSeries.slices.template.strokeWidth = 0;
    
    chart.legend = new am4charts.Legend();
    chart.legend.position = "right";
    
  }); // end am4core.ready()

Ostatnim elementem jest sprawdzenie wprowadzonych zmian.

Wykres w wersji dla komputera:

R1XI7riOkWwQB

Zrzut ekranu przedstawia wykres w kształcie pączka.
W lewym górnym rogu znajduje się napis: Zestawienie wartości odżywczych.
Na samym środku znajduje się wykres podzielony na cztery części w odcieniach koloru niebieskiego.
Po prawej stronie znajduje się legenda.
Do kolorów zostały przypisane nazwy oraz ich wartości procentowe: Tłuszcz 42.9%, Węglowodany 25.8%, Białko 17.2%, Pozostałe 14.2%.

Gradient pomiędzy kolorami może nie być zadowalający. W celu rozwiązania tego problemu wracamy do dokumentacji amCharts. Na stronie głównej można zobaczyć proponowane przykładowe palety barw.

Wybierzmy propozycję, w której różnice między kolorami są lepiej widoczne.

R18k3DuYFGbYU

Zrzut ekranu przedstawia pasek na, na którym widnieje napis: Select a theme.
Po prawej stronie znajduje się osiem motywów kolorów możliwych do wyboru.

Zmiana palety barw wymaga kilku korekt w kodzie.

W pliku html w sekcji <head> dodajemy źródło:

<script src="https://cdn.amcharts.com/lib/4/themes/kelly.js"></script>

Podobnie postępujemy w przypadku pliku Java Script:

// Themes begin
am4core.useTheme(am4themes_kelly);
am4core.useTheme(am4themes_animated);

Przetestujmy bibliotekę ponownie.

Wersja na komputer:

RnDszh0bQhfie

Zrzut ekranu przedstawia wykres w kształcie pączka.
W lewym górnym rogu znajduje się napis: Zestawienie wartości odżywczych.
Na samym środku znajduje się wykres podzielony na cztery części w kolorach: żółty, fioletowy, zielony, niebieski.
Po prawej stronie znajduje się legenda.
Do kolorów zostały przypisane nazwy oraz ich wartości procentowe: żółty: Tłuszcz 42.9%, fioletowy: Węglowodany 25.8%, zielony: Białko 17.2%, niebieski: Pozostałe 14.2%.

Wersja mobilna:

R11eLKAsDUCm1

Zrzut ekranu przedstawia wykres w kształcie pączka.
Na samej górze znajduje się napis: Zestawienie wartości odżywczych.
Po lewej stronie znajduje się mały wykres podzielony na cztery części w kolorach: żółty, fioletowy, zielony, niebieski.
Po prawej stronie znajduje się legenda.
Do kolorów zostały przypisane nazwy oraz ich wartości procentowe: żółty: Tłuszcz 42.9%, fioletowy: Węglowodany 25.8%, zielony: Białko 17.2%, niebieski: Pozostałe 14.2%.

Słownik