Integration von CanvasJS mit DataTables

CanvasJS ist eine JavaScript-Diagrammbibliothek, mit der Sie interaktive und reaktionsfähige Diagramme erstellen können, während DataTables ein jQuery-Plugin ist, das HTML-Tabellen mit erweiterten Interaktionssteuerelementen wie Paginierung, Filterung und Sortierung erweitert. Die Kombination dieser beiden Tools in einem Dashboard ermöglicht die Datenvisualisierung in Echtzeit und erleichtert die Analyse und Interpretation von Datentrends und -mustern durch interaktive und optisch ansprechende Diagramme, die sich dynamisch basierend auf den Tabellendaten aktualisieren.

In diesem Tutorial führen wir den Prozess der Integration von CanvasJS mit DataTables durch, um ein dynamisches Kreisdiagramm zu erstellen, das basierend auf den Daten in der Tabelle aktualisiert wird. In diesem Beispiel wird eine einfache HTML-Struktur und JavaScript-Code verwendet, um die Integration zu demonstrieren.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Sie Folgendes haben:

• Grundkenntnisse in HTML, CSS und JavaScript.
• CanvasJS- und DataTables-Bibliotheken, die in Ihrem Projekt enthalten sind.

Schritt 1: HTML einrichten

Erstellen Sie zunächst eine HTML-Datei mit einem Container für das Diagramm und einer Tabelle für die Daten.

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
    </tr>
    <!-- Add more rows as needed -->
  </tbody>
</table>

Schritt 2: Erstellen der JavaScript-Datei

Erstellen Sie eine script.js-Datei und fügen Sie den folgenden Code hinzu, um das DataTable- und CanvasJS-Diagramm zu initialisieren.

// Create DataTable
var table = new DataTable('#dataTable');

// Create chart
var chart = new CanvasJS.Chart('chartContainer', {
        animationEnabled: true,
    theme: "light2",
    title: {
        text: 'Staff Count Per Position'
    },
    data: [
        {
            type: "pie",
          dataPoints: chartData(table)
        }
    ]
});
chart.render();

// On each draw, update the data in the chart
table.on('draw', function () {
    chart.options.data[0].dataPoints = chartData(table);
    chart.render();
});

function chartData(table) {
    var counts = {};

    // Count the number of entries for each position
    table
        .column(1, { search: 'applied' })
        .data()
        .each(function (val) {
            if (counts[val]) {
                counts[val] += 1;
            }
            else {
                counts[val] = 1;
            }
        });

    return Object.entries(counts).map((e) => ({
        label: e[0],
        y: e[1]
    }));
}

• HTML-Struktur: Die HTML-Datei enthält einen Container für das Diagramm (chartContainer) und eine Tabelle (Beispiel) mit Beispieldaten.
• DataTable-Initialisierung: Die DataTable wird mit dem DataTable-Konstruktor initialisiert.
• CanvasJS-Diagramminitialisierung: Ein neues CanvasJS-Diagramm wird mit den angegebenen Optionen erstellt, einschließlich Diagrammtyp (Kreis) und Datenpunkten.
• Dynamische Datenaktualisierung: Das Zeichenereignis der DataTable wird verwendet, um die Diagrammdatenpunkte zu aktualisieren, wenn die Tabelle neu gezeichnet wird. Die chartData-Funktion berechnet die Anzahl der Einträge für jede Position und aktualisiert das Diagramm entsprechend.

Schritt 3: Testen und debuggen

• Öffnen Sie die HTML-Datei in einem Webbrowser: Stellen Sie sicher, dass Diagramm und Tabelle korrekt angezeigt werden.
• Auf Fehler prüfen: Öffnen Sie die Entwicklerkonsole des Browsers, um nach JavaScript-Fehlern zu suchen.
• Dynamische Aktualisierungen überprüfen: Fügen Sie Zeilen zur Tabelle hinzu oder entfernen Sie sie und stellen Sie sicher, dass das Diagramm entsprechend aktualisiert wird.

jsfiddle.net

Durch Befolgen dieser Schritte haben Sie CanvasJS erfolgreich in DataTables integriert, um ein dynamisches Kreisdiagramm zu erstellen, das basierend auf den Daten in der Tabelle aktualisiert wird. Diese Integration ermöglicht Ihnen die Visualisierung von Daten in Echtzeit und erleichtert so die Analyse und das Verständnis der in der DataTable dargestellten Informationen. Sie können das Diagramm und die Tabelle jederzeit nach Bedarf an Ihren spezifischen Anwendungsfall anpassen. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonIntegration von CanvasJS mit DataTables. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!