Heim > Web-Frontend > js-Tutorial > Integration von CanvasJS mit DataTables

Integration von CanvasJS mit DataTables

Barbara Streisand
Freigeben: 2024-10-01 20:17:03
Original
779 Leute haben es durchsucht

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.

Integrating CanvasJS with DataTables

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>
Nach dem Login kopieren

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]
    }));
}
Nach dem Login kopieren
  • 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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage