Share
Ce que vous allez créerDans ce didacticiel vidéo de mon cours sur la conception de données avec Chart.js, vous allez créer un graphique à courbes simple en utilisant le cadre Chart.js pour tracer une série de points sur une grille. Ceci fait, nous allons regarder le framework Chart.js faire le reste du travail lourd pour vous.
Vous pouvez trouver le code source ici:
Commencez par ouvrir CodePen de départ pour ce tutoriel et en cliquant sur le bouton Fourchette bouton pour en créer une nouvelle copie. Cela nous mènera à une nouvelle URL, où nous avons notre propre copie fraîche qui a les mêmes paramètres appliqués.
Lorsque nous créons un graphique à l'aide de la structure Chart.js, nous avons besoin d'un élément canvas. La bibliothèque Chart JS repose sur des éléments de canevas. Donc, créez un élément de toile dans la section HTML, donnez-lui un ID de graphique en ligne, puis fermez cet élément de toile.
Nous n'allons pas nous inquiéter de la mise en forme ou du dimensionnement de cet élément de canevas, car même si nous essayons de le redimensionner à l'aide de CSS ou d'attributs sur l'élément HTML lui-même, cela ne fonctionnera pas. De la manière dont Chart.js fonctionne, il ne fera que redimensionner ce canevas à la taille de son parent, de sorte qu'il occupera quand même tout l'écran. Nous verrons plus tard comment résoudre ce problème, mais pour le moment, sautons dans notre code JavaScript et créons le graphique lui-même..
La première chose dont nous avons besoin dans JavaScript est le contexte de notre graphique, qui est en gros une façon élégante de dire l'élément auquel nous allons appliquer le graphique, qui est notre objet canvas..
Nous allons donc créer une variable appelée contexte, ou ctx pour faire court, et nous allons définir cela égal à cet objet de la toile. Et nous allons pointer sur cet objet de toile en utilisant jQuery. Donc, je vais utiliser le signe dollar et les parenthèses, et à l'intérieur des parenthèses, nous aurons une série de guillemets, et à l'intérieur des guillemets, nous utiliserons le sélecteur CSS pour cet objet de toile. Et nous pointons à l'ID de cet objet, donc nous allons taper # et puis l'ID, qui est graphique en ligne, puis ajoutez un point-virgule à la fin de cette déclaration.
Accentsconagua
var ctx = $ ("# line-chart");Maintenant que nous avons fait cela, nous avons juste besoin d’une ligne de code supplémentaire pour créer notre graphique. À présent, il s'agira d'une ligne de code complexe, qui ressemblera en réalité à plusieurs lignes, mais il s'agira simplement d'une déclaration JavaScript. C'est ici:
Maintenant laissez-moi vous guider étape par étape et expliquer ce qui se passe.
Nous commençons par créer une variable appelée graphique en ligne, et en utilisant la syntaxe Chart.js, nous fixons cela à un nouvelle carte.
Nous ajoutons des parenthèses ouvertes et fermées, et à l'intérieur de celles-ci, nous avons besoin de deux choses:
ctx.Nous pouvons considérer ce deuxième objet comme un ensemble de paires de valeurs de propriétés. Et la première propriété dont nous avons besoin va spécifier quel type de graphique il s’agit. Et ce nom de propriété est type. Et puis on ajoute 'ligne', et cela indique à Chart.js qu'il s'agit d'un graphique à courbes que nous créons.
Et ensuite, nous tapons une virgule et descendons à la ligne suivante. Ensuite, nous avons besoin de toutes les données qui figureront dans ce graphique. Nous allons donc taper le mot Les données. Et puis cette propriété de données va être un objet. Nous allons donc utiliser des accolades pour créer cet objet, et à l'intérieur de cet objet, nous aurons un certain nombre d'autres paires de valeurs de propriété..
Dans ce nouvel objet, nous avons besoin de deux choses.
La première chose dont nous avons besoin, ce sont toutes les étiquettes qui figureront au bas de notre graphique. Supposons donc que nous voulions un tableau reprenant les prix d'un produit au cours d'une année ou peut-être le cours des actions d'un stock particulier au cours d'une année. Donc, pour nos étiquettes, nous allons avoir chaque mois de l'année.
Nous avons ensuite besoin d’un tableau d’ensembles de données. Vous pouvez avoir plusieurs ensembles de données pour un même graphique, mais nous allons simplement nous inquiéter d'un ensemble de données pour le moment. Donc, le nom de cette propriété est jeux de données, et cela va être un tableau d'objets.
Lorsque nous créons le tableau en utilisant des crochets, nous pouvons voir que le graphique est déjà apparu.
Nous n'avons pas encore de données sur ce graphique, il ne sait donc pas comment mettre à l'échelle tous les chiffres à gauche du graphique, mais une fois que nous aurons commencé à intégrer certaines valeurs, leur apparence changera..
Vous devez vraiment faire attention à ce que vous faites lorsque vous ajoutez des valeurs. Nous devons nous assurer que notre jeux de données l'élément commence par un tableau, et à l'intérieur de ce tableau, il a un objet.
À l'intérieur de cet objet, nous allons d'abord avoir une étiquette pour l'année, 2015. Et puis la seule autre chose que nous aurons ici est notre liste de valeurs, qui est contenue dans un autre attribut appelé Les données. Ce ne sont fondamentalement que 12 nombres aléatoires pour cet exemple.
Une fois que nous avons collé ces chiffres, nous verrons que notre tableau s'anime.
Nous voyons donc maintenant que notre axe gauche a été modifié pour correspondre aux données que nous avons entrées. Nous pouvons également voir un seul ensemble de données sur une année, et l'étiquette que nous avons ajoutée pour 2015 est en haut..
Voilà comment vous créez un graphique en courbes simple en utilisant Chart.js.
La conception de données (ou «visualisation de données») est l’art d’afficher des informations de manière facile à consommer et à comprendre. Dans le cours complet, Data Design With Chart.js, vous apprendrez à utiliser Chart.js pour l’affichage dynamique de données avec des graphiques interactifs et accrocheurs..
Vous allez beaucoup plus loin dans ce premier graphique en courbes, par exemple en appliquant différents styles et en ajoutant plusieurs jeux de données. Ensuite, vous apprendrez à créer des graphiques à barres, à secteurs et même des graphiques animés..
