Cet article a été revu par des pairs par Jeff Smith. Merci à tous les pairs examinateurs de SitePoint pour avoir fait du contenu SitePoint le meilleur possible!
Rencontrez mon amie Jenny. Elle a récemment commencé à coder des sites Web. Elle aimait son travail et était très heureuse jusqu'à ce qu'elle rencontre Steve, qui a la réputation d'être, disons, pas un client très décontracté.
Steve avait beaucoup de données dans une feuille de calcul et il voulait l'afficher sur son site Web. Notre ami (maintenant Jenny est aussi votre ami!) A suggéré que Steve fasse les graphiques dans Excel et les télécharger comme images sur le site Web.
Mais Steve étant Steve, il voulait que les graphiques soient interactifs. Non seulement cela, il voulait également que les graphiques soient mis à jour chaque fois qu'il apportait les données de sa feuille de calcul.
Jenny ne savait pas comment résoudre ce problème, alors elle est venue me voir. Et, étant le bon ami que je suis, je lui ai donné ce conseil:
Demandez d'abord à votre client de déplacer ses données sur Google Sheets (parce que c'est ce que toutes les personnes cool font de nos jours). Ensuite, nous pouvons facilement implémenter les fonctionnalités dont il a besoin - les graphiques JavaScript interactifs et la mise à jour dynamique.
son client a accepté (heureusement!), Et Jenny et moi avons codé le reste de la solution. Mais comment? Eh bien, c'est ce que ce tutoriel vous apprendra.
J'ai divisé ce tutoriel en cinq étapes faciles à suivre:
donc sans plus tarder, plongeons-nous!
Avant de plonger dans la façon d'exporter des données, créons d'abord une feuille. En supposant que vous avez un compte Google, vous pouvez le faire en accédant à la page Google Sheets et en appuyant sur le bouton Démarrer un nouveau feuille de calcul . Dans la feuille de calcul qui s'ouvre, créez deux colonnes: acteur et revenu . Ensuite, remplissez votre feuille nouvellement créée avec certaines données. J'ai pris le mien d'ici: les acteurs les mieux payés du monde 2015.
Comme vous pouvez le voir, la colonne de gauche contient des étiquettes pour notre graphique, la droite des valeurs correspondant à ces étiquettes. Pour ceux d'entre vous qui suivent à la maison, vous pouvez prendre une copie de cette feuille ici (allez dans fichier > faire une copie ).
Les données disponibles dans Google Sheets peuvent être exportées vers plusieurs formats comme JSON, XML etc. et une fois exportés vers l'un de ces formats, il peut être facilement accessible via le Web.
Pour ouvrir votre document sur le Web, vous devez apporter les modifications suivantes aux paramètres du document:
Avec ces deux modifications apportées, les données du document sont accessibles au format JSON via: https://spreadsheets.google.com/feeds/list/spreadsheet/od6/public/basic?alt=json
Vous devrez remplacer la feuille de calcul par l'ID de votre feuille Google, qui dans notre cas est 1aoz_gcpyoeimmnd1n_meynop8tj0fcxpp1aouhcpwzo. Vous pouvez voir les résultats ici.
Nous utiliserons la méthode get () de jQuery pour récupérer les données de Google Sheets. Vous pouvez inclure jQuery à partir d'un CDN comme indiqué:
<span><span><span><script</span> type<span>="text/javascript"</span> src<span>="https://code.jquery.com/jquery-1.12.0.min.js"</span>></span><span><span></script</span>></span> </span>
Avec la balise
<span>var spreadsheetId = "1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo",
</span> url <span>= "https://spreadsheets.google.com/feeds/list/" +
</span> spreadsheetId <span>+
</span> <span>"/od6/public/basic?alt=json";
</span>
$<span>.get({
</span> <span>url: url,
</span> <span>success: function(response) {
</span> <span>console.log(response);
</span> <span>}
</span><span>});
</span>Le code jQuery ci-dessus fait une demande ajax à l'URL de Google Sheets, et après avoir réussi à récupérer les données, il appelle la fonction de réussite. Cette fonction enregistre les données renvoyées du serveur vers la console. Je vous encourage à exécuter ce script et à prendre un moment pour examiner exactement ce qui est retourné.
Les données JSON de Google Sheets doivent être un peu restructurées pour correspondre au format de données accepté par notre bibliothèque de visualisation. Pour ce tutoriel, nous utiliserons FusionCharts.
FusionCharts accepte les données JSON comme un tableau d'objets contenant des clés d'étiquette et de valeur. Voici à quoi ça ressemble:
<span>[{
</span> <span>"label": "Robert Downey Jr.",
</span> <span>"value": "80"
</span><span>}
</span><span>...]
</span>Pour y parvenir, nous devons exécuter un morceau de code suivant dans le rappel de réussite de la fonction jQuery Get que nous avons définie plus tôt.
<span>var data = response.feed.entry,
</span> len <span>= data.length,
</span> i <span>= 0,
</span> parsedData <span>= [];
</span>
<span>for (i = 0; i < len; i++) {
</span> parsedData<span>.push({
</span> <span>label: data[i].title.$t,
</span> <span>value: data[i].content.$t.replace('Income: ', '')
</span> <span>});
</span><span>}
</span>Ce que nous faisons ici, c'est d'itérer chaque objet de données Google Sheet présente en réponse.feed.entry et d'extraire l'étiquette et la valeur. Ensuite, nous les stockons dans un nouveau tableau parseddata, qui sera utilisé par le graphique.
L'étiquette est disponible dans la touche de titre. $ T et la valeur est disponible dans le contenu. $ T Clé de l'objet de données. La valeur contient cependant le nom de la colonne de feuille, ce qui n'est pas nécessaire, donc nous le supprimons. Le reste des données de la feuille Google n'est pas nécessaire pour la visualisation.
Le tableau ParsedData contient désormais des données dans un format qui sera compris par FusionCharts et nous pouvons continuer à créer la visualisation.
Maintenant, avec nos données prêtes et accessibles, nous pouvons passer à la création de graphiques. La création du graphique implique les étapes suivantes:
Dans le balisage, nous incluons la bibliothèque FusionCharts via un CDN:
<span><span><span><script</span> type<span>="text/javascript"</span> src<span>="https://code.jquery.com/jquery-1.12.0.min.js"</span>></span><span><span></script</span>></span> </span>
ainsi qu'un élément contenant pour le graphique. Cela peut contenir un texte de support de place qui s'affiche avant que le graphique ne rende.
<span>var spreadsheetId = "1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo",
</span> url <span>= "https://spreadsheets.google.com/feeds/list/" +
</span> spreadsheetId <span>+
</span> <span>"/od6/public/basic?alt=json";
</span>
$<span>.get({
</span> <span>url: url,
</span> <span>success: function(response) {
</span> <span>console.log(response);
</span> <span>}
</span><span>});
</span>Pour créer et rendre un graphique à barres horizontal de base en # graphique-container, nous ajouterons le code suivant au Success Rappel:
<span>[{
</span> <span>"label": "Robert Downey Jr.",
</span> <span>"value": "80"
</span><span>}
</span><span>...]
</span>Examinons certaines des options de configuration que nous avons définies pour le graphique:
Et voici une démo de ce que nous avons jusqu'à présent:
Voir les graphiques JavaScript Pen Google Sheets par SitePoint (@SitePoint) sur Codepen.
Alors que la démo ci-dessus fonctionne, elle semble peut-être un peu générique. Heureusement, vous pouvez personnaliser presque tous les aspects de l'apparence d'un graphique. FusionCharts a une excellente documentation, que je vous suggère de consulter.
Voici le même graphique personnalisé pour ressembler un peu plus, ahem, attrayant.
Voir les graphiques JavaScript Pen Google Sheets (2) par SitePoint (@SitePoint) sur Codepen.
Comme vous l'avez vu, il n'est pas si difficile de créer un graphique en direct à partir de Google Sheets. Les graphiques JavaScript en direct peuvent même être générés pour des types de graphiques complexes, ces graphiques multi-séries. La seule chose qui doit être élaborée pour des graphiques complexes est de savoir comment restructurer les données des feuilles Google au format accepté par le graphique. Tout le reste reste le même.
PS: Je vais traîner dans la section des commentaires ci-dessous, alors n'hésitez pas à poser toutes les questions que vous avez sur ce tutoriel. Je suis plus heureux d'aider!
La création de graphiques JavaScript interactifs à l'aide de données de Google Sheets implique plusieurs étapes. Tout d'abord, vous devez configurer votre API Google Sheets. Cela implique la création d'un nouveau projet dans la console Google Cloud, l'activation de l'API Sheets et la création d'identification. Une fois que vous avez votre clé API, vous pouvez l'utiliser pour accéder à vos données Google Sheets. Ensuite, vous devez créer votre graphique à l'aide de JavaScript. Il existe plusieurs bibliothèques disponibles pour cela, telles que Chart.js, HighCharts et Google Charts. Vous pouvez utiliser ces bibliothèques pour créer une variété de types de graphiques, y compris des graphiques à barres, des graphiques de ligne et des graphiques à tarte. Enfin, vous devez connecter votre graphique à vos données Google Sheets. Cela implique de récupérer les données de Google Sheets à l'aide de la clé API, d'analyser les données dans un format que votre bibliothèque de graphique peut comprendre, puis de mettre à jour le graphique avec les données.
Certains problèmes courants lors de la création de graphiques JavaScript interactifs utilisant des données de Google Sheets incluent des problèmes avec la clé API, les problèmes de récupération des données et les difficultés avec l'analyse des données. Si votre clé API n'est pas configurée correctement, vous ne pourrez peut-être pas accéder à vos données Google Sheets. Si vous avez du mal à récupérer les données, cela peut être dû à des problèmes de réseau ou à des problèmes avec l'API Google Sheets. Si vous rencontrez des problèmes d'analyse des données, cela peut être dû au fait que les données sont dans un format que votre bibliothèque de graphiques ne peut pas comprendre. Pour résoudre ces problèmes, vous devez vérifier votre clé API, tester votre connexion réseau et vous assurer que vos données sont dans un format compatible.
Oui, vous pouvez utiliser d'autres sources de données en plus des feuilles Google pour vos graphiques JavaScript. La plupart des bibliothèques de graphiques, y compris Chart.js, HighCharts et Google Charts, peuvent accepter des données dans une variété de formats, notamment JSON, CSV et XML. Vous pouvez récupérer ces données à partir d'une variété de sources, y compris des bases de données, des API et des fichiers locaux. Cependant, l'utilisation de Google Sheets comme source de données présente plusieurs avantages, notamment une configuration facile, des mises à jour en temps réel et la possibilité de partager et de collaborer sur les données.
Pour mettre à jour votre tableau JavaScript en temps réel avec les données de Google Sheets, vous devez configurer un mécanisme de sondage. Cela implique de récupérer périodiquement les données de Google Sheets et de mettre à jour le graphique avec les nouvelles données. Vous pouvez le faire en utilisant la fonction SetInterval de JavaScript, qui vous permet d'exécuter une fonction à des intervalles spécifiés. Dans la fonction, vous obtiendrez les données de Google Sheets, l'analyse dans un format que votre bibliothèque de graphique peut comprendre, puis mettre à jour le graphique avec les nouvelles données.
Oui, vous pouvez partager votre tableau JavaScript interactif avec d'autres. La plupart des bibliothèques de graphiques, y compris Chart.js, HighCharts et Google Charts, vous permettent d'exporter votre graphique en tant qu'image ou PDF. Vous pouvez ensuite partager ce fichier avec d'autres. Alternativement, si votre graphique est hébergé sur une page Web, vous pouvez simplement partager l'URL de la page. Si vous utilisez Google Sheets comme source de données, vous pouvez également partager le document Google Sheets avec d'autres, ce qui leur permet de visualiser et de modifier les données.
Vous pouvez personnaliser l'apparence de votre tableau JavaScript à l'aide des options fournies par votre bibliothèque de graphiques. La plupart des bibliothèques de graphiques, y compris Chart.js, HighCharts et Google Charts, vous permettent de personnaliser une variété d'aspects de votre graphique, y compris les couleurs, les polices, les étiquettes et les info-bullets. Vous pouvez également ajouter des fonctionnalités interactives, telles que le zoom et le paning, et les animations.
Vous pouvez ajouter de l'interactivité à votre graphique JavaScript en utilisant les options fournies par votre bibliothèque de graphiques. La plupart des bibliothèques de graphiques, y compris Chart.js, HighCharts et Google Charts, vous permettent d'ajouter des fonctionnalités interactives, telles que les infractions, le zoom et le panoramique et les animations. Vous pouvez également ajouter des écouteurs d'événements à votre graphique, vous permettant d'exécuter une fonction lorsque l'utilisateur interagit avec le graphique d'une certaine manière, comme cliquer sur un point de données.
Oui, vous pouvez utiliser des graphiques JavaScript dans votre application mobile. La plupart des bibliothèques de graphiques, y compris Chart.js, HighCharts et Google Charts, sont compatibles avec les appareils mobiles. Cependant, vous devrez peut-être effectuer des ajustements pour vous assurer que votre graphique s'affiche correctement sur les écrans plus petits. Cela peut impliquer d'ajuster la taille du graphique, la disposition des éléments et les interactions tactiles.
Vous pouvez déboguer les problèmes avec votre javascript Tableau à l'aide des outils de développeur de votre navigateur Web. Ces outils vous permettent d'inspecter les éléments de votre graphique, de consulter le journal de la console et de parcourir votre code JavaScript. Si vous rencontrez des problèmes avec vos données Google Sheets, vous pouvez également utiliser le Google Sheets API Explorer pour tester vos demandes d'API.
Vous pouvez optimiser les performances de votre graphique JavaScript en minimisant la quantité de données que vous récupérez à partir de Google Sheets, en optimisant votre code JavaScript et en utilisant les performances Caractéristiques de votre bibliothèque de graphiques. Rechercher de grandes quantités de données peut ralentir votre graphique, alors essayez de récupérer uniquement les données dont vous avez besoin. Vous pouvez également optimiser votre code JavaScript en évitant les calculs inutiles et en utilisant des algorithmes efficaces. La plupart des bibliothèques de graphiques, y compris Chart.js, HighCharts et Google Charts, fournissent également des fonctionnalités de performances, telles que le chargement paresseux et l'accélération matérielle.
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!
Comment supprimer une base de données
Explication détaillée du fichier de configuration du quartz
Que faire si l'utilisation du processeur est trop élevée
Plateforme de trading Bitcoin
Comment vérifier l'adresse Mac
Méthode de récupération de base de données Oracle
Le rôle de la fonction mathématique en langage C
Utilisation de while
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
