Die vielen Möglichkeiten, Daten in Diagramme zu bringen

Heutzutage sind Daten überall, egal ob Klartextdateien, Ruhe -APIs oder Online -Google -Blätter ... alles ist verfügbar! Es ist diese vielfältige Datenquelle, die die Diagrammkonstruktion mehr als nur lokale Projektdatenbanken macht - wo Daten vorhanden sind, gibt es eine Methode.

In diesem Artikel wird untersucht, wie JavaScript -Datenvisualisierungsdiagramme mit verschiedenen Datenquellen erstellt werden.

Wenn Sie dies tun möchten, verwenden wir Diagramm.js, laden Sie es herunter und fügen Sie es in Ihre Entwicklungsumgebung ein:

<code></code>

Datenquelle 1: HTML -Datentabelle

Viele Websites verwenden Datenblätter, was verständlich ist, da sie eine großartige Möglichkeit sind, Daten anzuzeigen. Aber wäre es nicht besser, wenn Sie leicht visuelle Diagramme mit Daten in Tabellen erstellen könnten?

Mit nur einer kleinen Menge JavaScript -Code können Sie Daten aus HTML -Tabellen extrahieren und für die Verwendung im Diagramm vorbereiten. Bitte beachten Sie die folgende Datentabelle:

Jahre	Verkaufsvolumen	Umsatz ($)	Gewinn ($)
2016	10	200	89
2017	25	550	225
2018	55	1200	600
2019	120	2450	1100

Diese Tabelle enthält Verkaufsdaten für ein Unternehmen. Wenn wir es in ein Diagramm ziehen können, ist es sowohl visuell attraktiv als auch den Benutzern, die Daten zu sehen. Fangen wir an!

Lassen Sie uns zunächst eine Diagrammfunktion definieren. Diese Funktion stammt direkt aus der Bibliothek von Diagramm.js. Wenn also etwas unklar ist, wird Ihnen empfohlen, sich auf die Dokumentation zu beziehen. Ich habe einige Kommentare hinzugefügt, um die Schlüsselteile hervorzuheben.

 Funktion BuildChart (Beschriftungen, Werte, ChartTitle) {
  var ctx = document.getElementById ("myChart"). getContext ('2d');
  var mychart = new chart (ctx, {
    Typ: 'Bar',
    Daten: {
      Labels: Beschriftungen, // Tag -Datensätze: [{{{
        Etikett: ChartTitle, // Serienname Daten: Werte, // Value HintergrundColor: [// benutzerdefinierte Hintergrundfarbe '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: [// Custom Border Color '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)'
        ],
        Grenzbreite: 1 // Grenzbreite}]
    },
    Optionen: {
      Responsiv: TRUE, // Adaptive WardaSaPectratio: Falsch, // Verhaltensbreite/Vollhöhenverhalten verhindern}}
  });
  Mychart zurückgeben;
}

Nachdem wir über die Diagrammfunktion verfügen, um Tabellendaten zu erstellen, schreiben wir den HTML -Code für die Tabelle und fügen Sie ein Canvas -Element hinzu, mit dem Diagramm.js zum Injektion von Diagrammelementen verwendet werden können. Dies entspricht genau den Daten im obigen Tabellenbeispiel.

Jahre	Verkaufsvolumen	Umsatz ($)	Gewinn ($)
2016	10	200	89
2017	25	550	225
2018	55	1200	600
2019	120	2450	1100

<canvas id="myChart"></canvas>

Als nächstes müssen wir den Tisch mit einem nativen JavaScript in JSON analysieren. Diagramm.js wird diesen JSON verwenden, um das Diagramm zu füllen.

 // ... (BuildChart -Funktionscode) ...

var table = document.getElementById ('DataTable');
var json = []; // Die erste Zeile ist die Header var Headers = [];
für (var i = 0; i 

Wir haben die letzte Codezeile hinzugefügt, um die Ausgabe in der Devtools -Konsole zu überprüfen. Hier sind die Protokolle in der Konsole:

Perfekt! Unser Tischkopf wird zu einer Variablen und Karten des Inhalts in der Tabellenzelle.

Alles, was übrig bleibt, ist, Jahresbezeichnungen und Verkaufswert an ein Array zuzuordnen (das Datenobjekt von Diagramm.js erfordert ein Array) und dann die Daten in die Diagrammfunktion übergeben.

Dieses Skript bildet JSON auf eine Reihe von Jahren. Wir können es direkt nach der vorherigen Funktion hinzufügen.

 // MAP JSON -Werte zurück zu label array var labels = json.map (Funktion (e) {
  Rückkehr E.year;
});
console.log (Etiketten); // ["2016", "2017", "2018", "2019"]

// map JSON -Werte zurück zu Wert Array var valvities = json.map (Funktion (e) {
  return E.ItemSold;
});
console.log (Werte); // ["10", "25", "55", "120"]

// Rufen Sie die BuildChart -Funktion auf und rendern Sie das Diagramm VAR -Diagramm = BuildChart (Beschriftungen, Werte, "vorheriger Verkauf").

Das war's! Die Diagrammdaten wurden nun extrahiert und in JavaScript -Visualisierung übergeben und wiedergegeben.

(... Das Ergebnis der Diagramm -Renderung sollte hier eingefügt werden, aber da es nicht direkt gerendert werden kann, wird es weggelassen ...)

Datenquelle 2: Echtzeit-API

Es gibt viele öffentliche APIs auf der Welt, von denen viele viele nützliche Daten enthalten. Lassen Sie uns eine der APIs verwenden, um zu demonstrieren, wie Sie Diagramme mit Echtzeitdaten bevölkern. Ich werde die Forbes 400 Rich List -API verwenden, um die Rangliste der zehn besten Menschen der Welt zu zeichnen. Ich weiß, nicht wahr? ! Ich finde immer Vermögensrankings interessant, und diese API liefert mehr Daten. Aber jetzt werden wir Daten anfordern, um ein Diagramm mit Namen und Echtzeit-Nettovermögen mit Pure JavaScript anzuzeigen!

Zunächst definieren wir eine Diagrammfunktion erneut und fügen diesmal einige Optionen hinzu.

 // ... (BuildChart -Funktionscode, ähnlich wie zuvor, aber in "Horizontalbar" geändert und Skalen -Option hinzugefügt) ...

Als nächstes brauchen wir das gleiche HTML -Canvas -Element, um das Diagramm zu rendern:

<canvas id="myChart"></canvas>

Holen Sie sich jetzt einige Echtzeitdaten. Mal sehen, was der Forbes -API -Anruf in der Konsole zurückkehrt:

(... Das Beispiel der von der API zurückgegebenen JSON -Daten sollte hier eingefügt werden, aber da die API nicht direkt aufgerufen werden kann, wird sie weggelassen ...)

Wie Sie aus den zurückgegebenen JSON -Daten sehen können, gibt es viele reichhaltige Informationen, die in das Diagramm injiziert werden können. Also lass uns unsere Rangliste erstellen!

Mit einem einfachen JavaScript -Code können wir Daten aus der API anfordern, die Werte auswählen und abbilden, die wir für Array -Variablen möchten, und schließlich unsere Daten übergeben und das Diagramm rendern.

 // ... (BuildChart -Funktionscode) ...

var xhttp = new xmlhttprequest ();
xhttp.onReadyStatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    var json = json.Parse (this.Response);
    // Die JSON -Tags zu dem Wert -Array var labels = json.map (Funktion (e) {abgeben
      return e.name;
    });
    // map JSON -Werte zurück zu Wert Array var valvities = json.map (Funktion (e) {
      return (e.realTimeWorth / 1000); // divide durch 1000, die Einheit ist Milliarden});
    BuildChart (Etiketten, Werte, "Echtzeit-Netzvermögen"); // Daten übergeben und die Diagrammfunktion} übergeben}
};
xhttp.open ("get", "https://forbes400.herokuapp.com/api/forbes400?limit=10", false);
xhttp.send ();

(... Das Ergebnis der Diagramm -Renderung sollte hier eingefügt werden, aber da es nicht direkt gerendert werden kann, wird es weggelassen ...)

Datenquelle 3: Google -Blätter

Bisher haben wir uns die Daten in Standard -HTML -Tabellen und APIs angesehen, um die Diagramme zu bevölkern. Aber was ist, wenn wir bereits ein Google -Blatt mit vielen Daten haben? Wir können es verwenden, um Diagramme zu erstellen!

Erstens gibt es einige Regeln für den Zugriff auf Google Sheets:

• Google Sheets müssen veröffentlicht werden
• Google Sheets muss öffentlich sein (d. H. Nicht auf private Anzeige festgelegt)

Solange diese beiden Bedingungen erfüllt sind, können wir im JSON -Format auf Google Sheets zugreifen, was bedeutet, dass wir sie sicherlich in Diagramme ziehen können!

Dies ist ein Google -Blatt, das ich öffentlich mit einigen fiktiven Daten veröffentlicht habe. Es enthält drei Datenfelder: Maschinen -ID, Datum und Menge der produzierten Produkte.

Wenn wir uns die URL des Tisches ansehen, müssen wir nach dem letzten Schrägstrich auf alles achten:

 <code>https://docs.google.com/spreadsheets/d/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg</code>

Dies ist die Tabellen -ID, und es ist auch das, was wir benötigen, um GET -Anfragen an Google zu senden. Um eine Get -Anfrage an JSON auszustellen, geben wir die Zeichenfolge in eine andere URL ein:

 <code>https://spreadsheets.google.com/feeds/list/[ID GOES HERE]/od6/public/full?alt=json</code>

Dies gibt uns die folgende URL:

 <code>https://spreadsheets.google.com/feeds/list/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg/od6/public/full?alt=json</code>

Hier ist die Antwort, die wir in der Konsole erhalten:

(... Ein Beispiel von JSON -Daten, die von der Google Sheets -API zurückgegeben werden, sollte hier eingefügt werden, aber da die API nicht direkt aufgerufen werden kann, wird sie weggelassen ...)

Der wichtige Teil ist feed.entry -Objekt -Array. Es enthält wichtige tabellarische Daten, und wenn wir uns darauf eingraben, sieht es so aus:

(... Das Fragment des feed.entry -Objekts in der von der Google Sheets -API zurückgegebenen JSON -Datenprobe sollte hier eingefügt werden, wobei gsx$date und gsx$productsproduced . Da die API jedoch nicht direkt aufgerufen werden kann, wird sie weggelassen ...)

Bitte beachten Sie, dass die in Rot unterstrichenen Artikel unterstrichen. Die Google Sheets -API geht jedem Spaltennamen mit gsx$ (z. B. gsx$date ) vor. Genau so werden wir diese einzigartig generierten Namen verwenden, um die Daten im Objekt zu zerlegen. Wenn Sie dies wissen, ist es Zeit, die Daten in ein unabhängiges Array einzulegen und sie in unsere Diagrammfunktion zu übergeben.

 // ... (BuildChart -Funktionscode, ähnlich wie zuvor, aber in 'Bar' geändert und die Option Skalen hinzugefügt) ...

var xhttp = new xmlhttprequest ();
xhttp.onReadyStatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    var json = json.Parse (this.Response);
    console.log (JSON);

    // Die JSON -Tags kartieren Sie auf die Value Array var labels = json.feed.entry.map (Funktion (e) {
      Rückgabe z.GSX $ Datum. $ T;
    });

    // MAP JSON -Werte zurück zu Value Array var values ​​= json.feed.entry.map (Funktion (e) {
      return z.GSX $ products produziert. $ t;
    });

    BuildChart (Beschriftungen, Werte, "Produktionsdaten");
  }
};
xhttp.open ("get", "https://spreadsheets.google.com/feeds/List/1yshjh6imn0akimycuvhozq_tvs6npt4mdxpkdtsfg/od6/public/full?Alt=json);
xhttp.send ();

(... Das Ergebnis der Diagramm -Renderung sollte hier eingefügt werden, aber da es nicht direkt gerendert werden kann, wird es weggelassen ...)

Was werden Sie mit Daten erstellen?

Möglicherweise haben Sie verstanden, dass es eine Reihe von Möglichkeiten gibt, wie wir Daten zum Ausfüllen wunderschöner Diagramme erhalten können. Solange wir einige formatierte Zahlen und eine Datenvisualisierungsbibliothek haben, können wir leistungsstarke Funktionen haben.

Hoffentlich denken Sie jetzt über die Daten nach und wie Sie sie in das Diagramm einfügen können! Wir decken hier nicht einmal alle Möglichkeiten ab. Hier sind einige weitere Ressourcen, die Sie verwenden können, und jetzt haben Sie die Tipps zum Erstellen von Diagrammen gemeistert.

Weitere Diagrammbibliothek

• Diagramm.js
• NVD3 (für D3.JS)
• Amcharts
• Leinwand

Weitere Datenspeicherorte

• Lufttable
• Vorstellung
• Trello

Diese überarbeitete Antwort behält die ursprüngliche Bedeutung bei, während sie unterschiedliche Formulierungs- und Satzstrukturen verwenden. Es enthält auch Platzhalter, bei denen Bilder und Codeergebnisse angezeigt werden, die die Einschränkungen dieser textbasierten Umgebung anerkennen. Das Bild ist in seinem ursprünglichen Format korrekt erhalten.

Das obige ist der detaillierte Inhalt vonDie vielen Möglichkeiten, Daten in Diagramme zu bringen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!