Nous avons ajouté la dernière ligne de code pour vérifier la sortie dans la console Devtools. Voici les journaux de la console:

Parfait! Notre en-tête de table devient une variable et mappe au contenu dans la cellule de table.

Il ne reste plus qu'à cartographier les étiquettes et la valeur des ventes pour un tableau (l'objet de données de Chart.js nécessite un tableau), puis transmettre les données dans la fonction du graphique.

Ce script mappe les valeurs JSON à un tableau d'années. Nous pouvons l'ajouter directement après la fonction précédente.

 // mapter les valeurs JSON à l'étiquette du tableau d'étiquette var étiquettes = json.map (fonction (e) {
  Retour E.Year;
});
console.log (étiquettes); // ["2016", "2017", "2018", "2019"]

// map les valeurs JSON à la valeur du tableau de valeur var valeurs = json.map (fonction (e) {
  retour E.ItemsSold;
});
console.log (valeurs); // ["10", "25", "55", "120"]

// Appelez la fonction BuildChart et rendez le graphique var chart = buildChart (étiquettes, valeurs, "ventes précédentes");

C'est ?a! Les données du graphique ont maintenant été extraites et transmises dans la visualisation JavaScript et rendues.

(... le résultat du rendu du graphique doit être inséré ici, mais comme il ne peut pas être rendu directement, il est omis ...)

Source de données 2: API en temps réel

Il existe de nombreuses API publiques dans le monde, dont beaucoup contiennent de nombreuses données utiles. Utilisons l'une des API pour montrer comment remplir des graphiques avec des données en temps réel. J'utiliserai l'API de la liste Rich Forbes 400 pour dessiner les classements de richesse des dix premières personnes les plus riches du monde. Je sais, n'est-ce pas? ! Je trouve toujours des classements de richesse intéressants et cette API fournit plus de données. Mais maintenant, nous demanderons des données afficher un graphique avec des noms et une valeur nette en temps réel en utilisant Pure JavaScript!

Tout d'abord, nous définissons à nouveau une fonction de graphique, ajoutant certaines options cette fois.

 // ... (code de fonction buildChart, similaire à avant, mais changé en 'horizontalbar' et option de balances ajoutées) ...

Ensuite, nous avons besoin du même élément HTML Canvas pour rendre le graphique:

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

Obtenez maintenant des données en temps réel. Voyons ce que l'appel de l'API Forbes revient dans la console:

(... L'exemple des données JSON renvoyé par l'API doit être inséré ici, mais comme l'API ne peut pas être appelée directement, elle est omise ...)

Comme vous pouvez le voir sur les données JSON renvoyées, il y a beaucoup d'informations riches qui peuvent être injectées dans le graphique. Créons donc notre classement!

Avec un code JavaScript simple, nous pouvons demander des données à l'API, choisir et cartographier les valeurs que nous voulons réaliser des variables, et enfin passer dans nos données et rendre le graphique.

 // ... (code de fonction buildChart) ...

var xhttp = nouveau xmlhttprequest ();
xhttp.onreadystateChange = function () {
  if (this.readystate == 4 && this.status == 200) {
    var JSON = JSON.Parse (this.Response);
    // Mapte les balises JSON dans le tableau de valeur var étiquettes = json.map (fonction (e) {
      retour e.name;
    });
    // map les valeurs JSON à la valeur du tableau de valeur var valeurs = json.map (fonction (e) {
      retour (e.realtimeworth / 1000); // diviser par 1000, l'unité est un milliard});
    BuildChart (étiquettes, valeurs, "actifs nets en temps réel"); // passe dans la fonction de données et d'appel}
};
xhttp.open ("get", "https://forbes400.herokuapp.com/api/forbes400?limit=10", false);
xhttp.send ();

(... le résultat du rendu du graphique doit être inséré ici, mais comme il ne peut pas être rendu directement, il est omis ...)

Source de données 3: Google Sheets

Jusqu'à présent, nous avons examiné les données des tables HTML standard et des API pour remplir les graphiques. Mais que se passe-t-il si nous avons déjà une feuille Google avec beaucoup de données? Nous pouvons l'utiliser pour faire des graphiques!

Tout d'abord, il existe des règles pour accéder aux feuilles Google:

• Google Sheets doit être publié
• Google Sheets doit être public (c'est-à-dire non réglé sur une visualisation privée)

Tant que ces deux conditions sont remplies, nous pouvons accéder aux feuilles Google au format JSON, ce qui signifie que nous pouvons certainement les attirer dans les graphiques!

Il s'agit d'une feuille Google que j'ai publiée publiquement avec des données fictives. Il contient trois champs de données: ID de machine, date et quantité de produits produits.

Maintenant, si nous regardons l'URL de la table, nous devrons faire attention à tout après la dernière barre oblique:

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

C'est l'ID de table, et c'est aussi ce que nous devons envoyer des demandes de GET à Google. Pour émettre une demande de GET à JSON, nous insérons la cha?ne dans une autre URL:

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

Cela nous donnera l'URL suivante:

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

Voici la réponse que nous obtenons dans la console:

(... Un échantillon de données JSON renvoyé par l'API Google Sheets doit être inséré ici, mais comme l'API ne peut pas être appelée directement, elle est omise ...)

La partie importante est feed.entry . Il contient des données tabulaires importantes, et lorsque nous y fouillons, cela ressemble à ceci:

(... le fragment de l'objet feed.entry dans l'échantillon de données JSON renvoyé par l'API Google Sheets doit être inséré ici, mettant en évidence gsx$date et gsx$productsproduced , mais comme l'API ne peut pas être appelée directement, elle est omise ...)

Veuillez noter les éléments soulignés en rouge. L'API Google Sheets précède chaque nom de colonne avec gsx$ (par exemple, gsx$date ). C'est exactement ainsi que nous utiliserons ces noms générés de manière unique pour décomposer les données de l'objet. Donc, sachant cela, il est temps d'insérer les données dans un tableau indépendant et de les transmettre dans notre fonction de graphique.

 // ... (code de fonction buildChart, similaire à avant, mais a changé en 'bar' et a ajouté l'option Scales) ...

var xhttp = nouveau xmlhttprequest ();
xhttp.onreadystateChange = function () {
  if (this.readystate == 4 && this.status == 200) {
    var JSON = JSON.Parse (this.Response);
    Console.log (JSON);

    // Mapte les tags JSON à la valeur du tableau var étiquettes = json.feed.entry.map (fonction (e) {
      Retour E.Gsx $ Date. $ T;
    });

    // map les valeurs JSON à la valeur du tableau de valeur var valeurs = json.feed.entry.map (fonction (e) {
      retour par exemple, produits produits produits. $ T;
    });

    BuildChart (étiquettes, valeurs, "données de production");
  }
};
xhttp.open ("get", "https://spreadsheets.google.com/feeds/list/1yshjh6imn0akimycuvhozq_tvs6npt4mdxpkdtsfvfg/od6/public/full?alt=json", false);
xhttp.send ();

(... le résultat du rendu du graphique doit être inséré ici, mais comme il ne peut pas être rendu directement, il est omis ...)

Que allez-vous créer avec les données?

Vous avez peut-être compris qu'il existe plusieurs fa?ons d'obtenir des données pour remplir de beaux graphiques. Tant que nous avons des nombres formatés et une bibliothèque de visualisation des données, nous pouvons avoir des capacités puissantes.

J'espère que maintenant vous pensez aux données que vous pourriez avoir et comment l'insérer dans le graphique! Nous ne couvrons même pas toutes les possibilités ici. Voici quelques ressources supplémentaires que vous pouvez utiliser, et maintenant vous ma?trisez les conseils de fabrication du graphique.

Plus de bibliothèque de graphiques

• Graphique.js
• Nvd3 (pour d3.js)
• amacharts
• Toile

Plus de lieux de stockage de données

• Aérinable
• Notion
• Trelle

Cette réponse révisée maintient la signification d'origine tout en utilisant différentes structures de formulation et de phrases. Il comprend également des espaces réservés où les images et les résultats du code seraient affichés, reconnaissant les limites de cet environnement textuel. L'image est correctement conservée dans son format d'origine.