Comment créer un graphique simple dans JavaScript
Cet article prendra un éventail d'éléments qui vont à la voiture et leur quantité trouvée dans une enquête. Après cela, il calculera leurs pourcentages à partir du total des voitures de l'enquête, puis les affichera sur le graphique avec leurs pourcentages écrits sur le graphique linéaire.
Étape 1: Configuration du document HTML
Le HTML ne nécessite pas beaucoup de choses à faire à l'intérieur. Nous avons simplement besoin de créer un vide <div> qui sera modifié par le code JavaScript, et JavaScript tracera également le graphique à l'intérieur de cette div. Par conséquent, utilisez les lignes suivantes:
Ceci est un graphique linéaire présentant des pourcentages de voitures à partir d'une enquête
À ce stade, le document HTML ne montrera que le résultat suivant:
Le div n'est pas visible, car actuellement il ne contient aucun autre éléments ou texte.
Étape 2: Configuration du code JavaScript
Commencez par créer un tableau d'éléments. Ce tableau va contenir le nom de la marque de voiture et le nombre de voitures. Pour cela, utilisez simplement les lignes suivantes:
Soit ElementArray = [];ElementArray [0] = ["Mercedes", 8];
ElementArray [1] = ["Audi", 13];
ElementArray [2] = ["BMW", 11];
ElementArray [3] = ["Porsche", 25];
Après cela, nous allons créer une fonction qui va tracer le graphique sur le document HTML. Cette fonction sera nommée «Plotgraph», Et il faudra les trois paramètres comme:
Fonction PlotGraph (Array, GraphWidth, Div)// Les lignes suivantes seront incluses dans ce corps
Comme vous pouvez le voir, cette fonction est à partir de laquelle l'élément va choisir les données brutes, il prend la largeur du graphique sur la page Web HTML et la div dans laquelle il doit tracer le graphique.
Dans cette fonction, la toute première chose est de créer les variables suivantes:
Soit TotalCars = 0;Soit CalPercentage = 0;
Soit calwidth = 0;
La chose est:
- Les voitures totales seront utilisées pour stocker le nombre de voitures
- Calpercentage sera utilisé pour calculer le pourcentage de chaque voiture
- Calwidth sera utilisé pour déterminer la taille de la barre (selon le pourcentage) du graphique à placer à l'intérieur de la largeur passé dans les paramètres
Pour calculer le nombre total de voitures, utilisez les lignes de code suivantes:
pour (i = 0; i < array.length; i++)TotalCars + = paSeInt (Array [i] [1]);
Après cela, créez une variable nommée comme sortie, cette variable sera utilisée pour créer un tableau sur la page Web HTML. Par conséquent, il contiendra du code HTML à l'intérieur:
Laissez la sortie = '| $ Array [i] [0] | $ Calpercentage% |
Maintenant, à ce stade, la variable de sortie contient la requête HTML complète pour tracer le graphique linéaire des données brutes fournies. Il ne reste plus qu'à accéder à la div et à le définir égal à notre sortir variable et affiche également le nombre total de voitures:
div.innerhtml = '$ outputTotal des voitures: $ TotalCars';;
Et avec ça la fonction tracé est complet. Pour tracer le graphique, appelez simplement le tracé fonctionne et passer dans les arguments comme:
Plotgraph (ElementArray, 500, document.getElementById ("GraphDiv"));Le code JavaScript complet est comme:
Soit ElementArray = [];ElementArray [0] = ["Mercedes", 8];
ElementArray [1] = ["Audi", 13];
ElementArray [2] = ["BMW", 11];
ElementArray [3] = ["Porsche", 25];
Fonction PlotGraph (Array, GraphWidth, Div)
Soit TotalCars = 0;
Soit CalPercentage = 0;
Soit calwidth = 0;
pour (i = 0; i < array.length; i++)
TotalCars + = paSeInt (Array [i] [1]);
Laissez la sortie = '
| $ Array [i] [0] | $ Calpercentage% |
div.innerhtml = '$ output
Total des voitures: $ TotalCars';;
Plotgraph (ElementArray, 500, document.getElementById ("GraphDiv"));
L'exécution du document HTML sur un navigateur Web affiche désormais la sortie suivante:
Et le graphique linéaire a été tracé à l'intérieur du div Présenter les pourcentages de différentes voitures à partir d'une enquête.
Conclusion
Il est possible de créer un graphique sur un document HTML à l'aide de JavaScript. Pour cela, l'utilisateur doit utiliser le Tag pour créer des éléments SVG et le pour regrouper plusieurs éléments SVG sous un nom spécifique. Cependant, il n'est pas facile de créer un graphique sur une page Web HTML car il peut être très intimidant pour un nouveau débutant. Dans cet article, un graphique linéaire a été construit avec JavaScript, et chaque étape a été soigneusement expliquée.