Les nombreuses façons d'obtenir des données dans les graphiques

De nos jours, les données sont partout, que ce soit des fichiers en texte brut, des API REST ou des feuilles Google en ligne ... tout est disponible! C'est cette source diversifiée de données qui rend la construction de graphiques plus que les bases de données de projet locales - où il y a des données, il existe une méthode.

Cet article explorera comment créer des graphiques de visualisation des données JavaScript à l'aide de diverses sources de données.

Si vous souhaitez le faire, nous utiliserons Chart.js, téléchargeons et l'inclurons dans votre environnement de développement:

<code></code>

Source de données 1: Table de données HTML

De nombreux sites Web utilisent des fiches techniques, ce qui est compréhensible car ils sont un excellent moyen d'afficher des données. Mais ne serait-il pas mieux que vous puissiez facilement créer des graphiques visuels avec des données dans les tableaux?

Avec juste une petite quantité de code JavaScript, vous pouvez extraire des données des tables HTML et les préparer à une utilisation dans le graphique. Veuillez consulter le tableau de données suivant:

années	Volume des ventes	Rignonment ($)	Bénéfice ($)
2016	10	200	89
2017	25	550	225
2018	55	1200	600
2019	120	2450	1100

Ce tableau contient des données de vente pour une entreprise. Si nous pouvons le dessiner dans un graphique, il sera à la fois visuellement attrayant et aidera les utilisateurs à voir les données. Commençons!

Tout d'abord, définissons une fonction de graphique. Cette fonction provient directement de la bibliothèque Chart.js, donc si quelque chose n'est pas clair, il est conseillé de vous référer à la documentation. J'ai ajouté quelques commentaires pour mettre en évidence les pièces clés.

 fonction buildChart (étiquettes, valeurs, charttitle) {
  var ctx = document.getElementById ("myChart"). getContext ('2d');
  var mychart = nouveau graphique (ctx, {
    Type: «bar»,
    données: {
      Étiquettes: étiquettes, // Tags de données: [{{
        Étiquette: ChartTitle, // Données de nom de la série: valeurs, // Valeur BackgroundColor: [// Couleur d'arrière-plan personnalisée '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: [// Couleur de bordure personnalisée '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)»
        ],
        BorderWidth: 1 // Largeur de bordure}]
    },
    Options: {
      Réactif: Vrai, // Adaptive RETAILASPECTERTRATIO: FALSE, // Empêcher le comportement par défaut en pleine largeur / pleine hauteur}
  });
  Retour MyChart;
}

Maintenant que nous avons la fonction du graphique pour créer des données de table, écrivons le code HTML pour la table et ajoutant un élément de canevas que Chart.js peut être utilisé pour injecter des éléments de graphique. C'est exactement la même chose que les données de l'exemple de tableau ci-dessus.

années	Volume des ventes	Rignonment ($)	Bénéfice ($)
2016	10	200	89
2017	25	550	225
2018	55	1200	600
2019	120	2450	1100

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

Ensuite, nous devons analyser la table en JSON en utilisant JavaScript natif. Chart.js utilisera ce JSON pour remplir le graphique.

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

var table = document.getElementById ('dataTable');
var json = []; // La première ligne est les en-têtes var en-tête = [];
pour (var i = 0; i 

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!