Wie erstellt man interaktive Diagramme und Grafiken mit JavaScript?

Interaktive Diagramme und Graphen mit JavaScript zu erstellen, erfordert ein paar Schritte. Sie können verschiedene JavaScript-Bibliotheken wie Chart.js, Google Charts, D3.js und mehr verwenden. In diesem Leitfaden werde ich die oben genannten drei Bibliotheken verwenden, um zu demonstrieren, wie interaktive Diagramme und Graphen erstellt werden können.

Der erste Schritt besteht darin, die Bibliothek auszuwählen, die Sie zur Erzeugung Ihrer Diagramme oder Graphen verwenden möchten, sie herunterzuladen und in Ihr HTML-Dokument einzufügen.

Hier ist ein Beispiel mit Chart.js:

Schritt 1. Fügen Sie die Chart.js-Bibliothek in Ihre HTML-Datei mit dem CDN ein:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Schritt 2. Erstellen Sie ein Canvas-Element in Ihrem HTML, auf dem Ihr Diagramm gezeichnet wird.

<canvas id="myChart" width="400" height="400"></canvas>

Schritt 3. Schreiben Sie eine JavaScript-Funktion, die ein neues Chart-Objekt erstellt. Die Funktion nimmt zwei Argumente entgegen: Die Art des Diagramms (z. B. Linie, Balken usw.) und die Daten für das Diagramm. Diagramme in Chart.js sind sehr anpassbar. Sie können mehr in ihrer Dokumentation lesen, aber für dieses Beispiel erstellen wir ein einfaches Liniendiagramm:

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Rot', 'Blau', 'Gelb', 'Grün', 'Lila', 'Orange'],
            datasets: [{
                label: '# der Stimmen',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });
</script>

Für die Verwendung von Google Charts folgen Sie diesen Schritten:

Schritt 1. Laden Sie die Google Charts-Bibliothek in Ihre HTML-Datei:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Schritt 2. In Ihrem JavaScript-Code müssen Sie zuerst die Diagrammbibliothek laden:

<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
</script>

Schritt 3. Erstellen Sie eine Callback-Funktion, die eine Datenbank erstellt und füllt, das Kreisdiagramm instanziiert, die Daten hineingibt und es zeichnet.

<script type="text/javascript">
 google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

   var data = google.visualization.arrayToDataTable([
      ['Aufgabe', 'Stunden pro Tag'],
      ['Arbeit',     11],
      ['Essen',      2],
      ['Pendeln',  2],
      ['Fernsehen', 2],
      ['Schlafen',    7]
    ]);

    var options = {
      title: 'Meine täglichen Aktivitäten'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
</script>

Schritt 4. Sie müssen auch einen entsprechenden div-Tag im Body Ihres HTML-Dokuments erstellen, der als Behälter für das Kreisdiagramm dient:

<div id="piechart" style="width: 900px; height: 500px;"></div>

Schließlich, wenn Sie D3.js verwenden möchten:

Schritt 1. Fügen Sie die D3.js-Bibliothek genauso wie zuvor ein.

<script src="https://d3js.org/d3.v5.min.js"></script>

Schritt 2. Erstellen Sie einen SVG-Bereich, in dem Ihr Graph gezeichnet wird.

<svg id="myCanvas" width="720" height="120"></svg>

Schritt 3. Verwenden Sie D3.js-Methoden, um Ihren Graphen zu zeichnen.

<script>
   var svg = d3.select("#myCanvas"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

   var data = [{date: 1, value: 34},{date: 2, value: 45}, {date: 3, value: 78}, {date: 4, value: 23}];
  
   var x = d3.scaleLinear().range([0, width]);
   var y = d3.scaleLinear().range([height, 0]);

   var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });
    
   x.domain(d3.extent(data, function(d) { return d.date; }));
   y.domain(d3.extent(data, function(d) { return d.value; }));

   svg.append("path")
    .data([data])
    .attr("class", "line")
    .attr("d", line);
</script>

Stellen Sie sicher, dass Sie die Bibliothek, die Sie verwenden, und das, was jeder dieser Schritte macht, gründlich verstehen. Sowohl Chart.js, Google Charts als auch D3.js ermöglichen fortgeschrittenere Anwendungsfälle und sind sehr anpassbar.