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.