Mit Echarts, Bootstrap und Tabulator zur maßgeschneiderten Datenvisualisierung (1/3)
Daten sind die Grundlage vieler Entscheidungen, und eine ansprechende, interaktive Visualisierung kann den Unterschied machen, wenn es darum geht, komplexe Zusammenhänge verständlich zu präsentieren. In dieser dreiteiligen Serie zeige ich, wie Sie mit Bootstrap, Tabulator und Echarts eine maßgeschneiderte Datenvisualisierung erstellen.
Teil 1: Bootstrap, Tabs und Daten-Endpunkt einrichten
Bootstrap-Grundlagen und Tab-Erstellung
Zuerst verwenden wir Bootstrap, um eine einfache, responsive Benutzeroberfläche zu erstellen. Tabs bieten eine klare Struktur, um unterschiedliche Datensätze oder Ansichten zu trennen.
HTML-Setup
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datenvisualisierung</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<ul class="nav nav-tabs" id="dataTabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab2">Tab 2</a>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane fade show active" id="tab1">
<h3>Tab 1 Inhalt</h3>
<div id="table-container">
<div id="table"></div>
</div>
</div>
<div class="tab-pane fade" id="tab2">
<h3>Tab 2 Inhalt</h3>
<div id="chart-container"></div>
</div>
</div>
</div>
</body>
</html>
Daten-Endpunkt erstellen
Wir simulieren eine API, die Daten liefert. Diese könnte entweder statische JSON-Daten oder echte Daten aus einer Datenbank zurückgeben. Diese findet aber erst im nächsten Teil Anwendung.
<?php
// titles-endpoint.php
header('Content-Type: application/json');
// Daten im passenden Format für Tabulator erstellen
$data = [
[
"produkt" => "Produkt 1",
"bestellnummer" => "12345",
"beschreibung" => "Ein tolles Produkt"
],
[
"produkt" => "Produkt 2",
"bestellnummer" => "67890",
"beschreibung" => "Noch ein tolles Produkt"
],
[
"produkt" => "Produkt 3",
"bestellnummer" => "11223",
"beschreibung" => "Das beste Produkt überhaupt"
]
];
// JSON-Antwort zurückgeben
echo json_encode($data);
Im ersten Teil haben wir die Grundlagen mit Bootstrap geschaffen und unseren Daten-Endpunkt vorbereitet. Im nächsten Teil geht es darum, Tabulator zu konfigurieren und interaktive Tabellen zu erstellen.
0 Kommentare