Votre structure de fichier devrait ressembler à ceci:

404.html ├── crossdomain.xml css .c main.css normalize.css favicon.ico img index.html js Dans le fichier main.js, plugins.js et le fournisseur, jquery-1.10.1.min.js et modernizr-2.6.2.min.js, des robots. SMS

Remarque: cela n'inclut pas certains des fichiers inclus dans H5BP que nous n'utiliserons pas.

Palette de couleurs

Avant de commencer à coder le site, commençons par définir une palette de couleurs que nous utiliserons tout au long de la conception. En faisant cela, nous pouvons établir un futur "guide de style"; c'est une pratique courante pour pratiquement n'importe quelle conception donnée.

Si vous construisez le tableau de bord en gardant à l'esprit une marque particulière, commencez par utiliser les couleurs de la marque. Aujourd'hui, nous définirons deux couleurs principales et deux couleurs auxiliaires. Nous allons également utiliser des nuances ou des versions estompées de ces couleurs.

• bleu foncé: # 637b85
• vert: # 2c9c69
• jaune: # dbba34
• rouge: # c62f29

Nous allons également utiliser une nuance plus claire du bleu foncé, # d0dde3. Enfin, nous utiliserons des couleurs en niveaux de gris.

Notions de base sur ChartJS

ChartJS utilise l'élément canvas. L'élément canvas fournit une interface exclusivement JavaScript pour dessiner des pixels dans une zone rectangulaire donnée. Il est souvent comparé à SVG, qui offre une solution basée sur un nœud DOM pour créer des graphiques vectoriels dans le navigateur. Toutefois, les pixels dessinés sur l'élément de la zone de dessin ne sont pas conservés en mémoire et ne répondent donc pas aux événements JavaScript..

Mais assez avec le discours technique - comment pouvons-nous commencer rapidement avec ChartJS?

Heureusement, la page d'accueil de ChartJS contient de nombreux exemples pour nous permettre de démarrer rapidement. Le modèle de base consiste à créer l'élément canvas en HTML, à le sélectionner avec JavaScript et à créer le graphique en transmettant les données à partir desquelles le graphique est construit..

L'exemple ci-dessus supposerait que vous avez défini «données» et «options» en tant qu'objets et générerait un graphique linéaire en conséquence..

Dans notre exemple, nous allons utiliser le graphique en anneau, le graphique linéaire et le graphique radar. Ces graphiques représenteront différentes métriques orientées métier, mais vous pouvez bien sûr prendre cela et l’adapter à vos besoins..

Annotation de page

Commençons par définir un code HTML de base pour la mise en page de notre page.

Ici, nous pouvons voir que nous avons un en-tête de base, un milieu et une section de pied de page. Nous utilisons les classes .wrapper et .push pour créer un pied de page collant (voir ici pour plus d'informations). Nous allons créer notre mise en page de manière à ce qu’elle soit compatible avec les mobiles d’abord, puis à partir de là. Il y a quelques astuces que nous allons tirer en cours de route, mais cette structure fera beaucoup de travail pour nous..

Avant d'aller trop loin…

Notez que canvas ne fonctionne pas très bien avec les requêtes de média. Pour ce tutoriel, nous allons créer une solution de contournement pour permettre aux graphiques d'être redessinés dans différentes tailles en JavaScript..

Dans notre fichier main.js, nous devrons avoir une fonction de dimensionnement déclenchée par un redimensionnement de la fenêtre. Nous aurons également besoin d'une fonction "redessiner" pour se déclencher après le déclenchement de la fonction de redimensionnement. Enfin, lorsque nous redessinons les graphiques, nous ne voulons pas qu’ils s’animent, comme si c’était la première fois qu’ils étaient dessinés..

(function () // configure la variable de délai d'attente var t; // configure la fonction de dimensionnement, // avec un argument qui indique au graphique d'animer ou non la taille de la fonction (animate) // Si nous redimensionnons, nous ne Vous ne voulez pas que les graphiques soient dessinés à chaque événement de redimensionnement. // Ceci efface le délai d'attente afin que nous n'exécutions la fonction de dimensionnement // qu'une fois le redimensionnement de la fenêtre terminé. clearTimeout (t); // Ceci réinitialisera le délai juste après l'avoir effacé. . t = setTimeout (function () $ ("canvas"). each (function (i, el) // Définit la hauteur et la largeur de l'élément canvas à la hauteur et à la largeur de son parent. // L'élément parent est le div. conteneur-toile $ (el) .attr ("width": $ (el) .parent (). width (), "height": $ (el) .parent (). outerHeight (),); // lance la fonction redessiner, qui construit tous les graphiques. redraw (animate); // parcourt les widgets et trouve le plus grand, et les met tous à cette hauteur. var m = 0; // nous devons supprime tout paramètre de hauteur en ligne de façon à obtenir la hauteur automatique. $ (". widget"). height (""); $ (". widget"). each (fonction (i, el) m = Math.max (m, $ (el) .height ());); $ (". widget"). height (m); , 100); // le délai d'attente doit s'exécuter après 100 millisecondes $ (window) .on ('resize', size); fonction redessiner (animation) var options = ; if (! animation) options.animation = false;  else options.animation = true;  //… // le reste de notre dessin graphique se déroulera ici //… size (); // cela lance le premier dessin; notez que le premier appel à la taille animera les graphiques.

Si cela semble un peu intimidant, ne vous inquiétez pas! Posez une question dans les commentaires, et nous et la communauté Tuts + vous aiderons à comprendre pleinement!

Quelques CSS pour nous lancer

Nous voulons mettre en place des structures CSS de base pour nous aider à démarrer. Bien sûr, HTML5 Boilerplate inclut normalize et quelques autres valeurs par défaut que vous pouvez modifier, mais dans l’intérêt du tutoriel, nous écrirons notre code CSS après la ligne "Styles personnalisés de l'auteur"..

html, corps hauteur: 100%;  body font-family: 'Source Sans Pro', sans-serif; couleur: # 666;  / * button * / .button curseur: pointeur; texte-décoration: aucun; taille de police: 0.6em; poids de la police: 400; text-transform: majuscule; affichage: inline-block; rembourrage: 4px 6px; marge: 0 10 px; position: relative; arrière-plan: #ccc; couleur: #fff; boîte-ombre: 0 0 2px rgba (0,0,0,0,1); arrière-plan: RGB (190, 190, 190); / * Anciens navigateurs * / arrière-plan: -moz-linear-gradient (en haut, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * FF3.6 + * / background: -webkit-gradient (linéaire, gauche en haut, gauche en bas, couleur-stop (0%, rgba (190,190,190,1)), couleur-stop (100%, rgba (170.170.170.1) ))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (en haut, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * Chrome10 +, Safari5.1 + * / arrière-plan: -o-linear-gradient (en haut, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (haut, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * IE10 + * / arrière-plan: gradient linéaire (vers le bas, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# bebebe", endColorstr = "# aaaaaa", GradientType = 0); / * IE6-9 * / .button: survolez background: # 637b85;  / * Styles d'en-tête * / header text-align: center; arrière-plan: # 637b85; couleur: #fff; marge inférieure: 40 px;  en-tête span font-weight: 200;  header .button font-size: 0.2em; en haut: -6px;  / * divers conteneurs * / .container width: 200px; marge: 0 auto;  .canvas-container min-height: 300px; hauteur maximale: 600px; position: relative;  .widget position: relative; marge inférieure: 80px; fond: #efefef; rembourrage: 12px; marge inférieure: 30 px; -webkit-box-dimensionnement: border-box; -moz-box-dimensionnement: border-box; taille de la boîte: boîte-frontière; 

Ici, nous définissons le CSS nécessaire pour le pied collant, ainsi qu'une classe de boutons, une classe de conteneur autocentrante, une classe pour contenir nos éléments de canevas dans nos widgets, et nos widgets eux-mêmes. Nous devrons également ajouter la police Google que nous définissons pour le corps en l'incluant dans notre balise head..

Le graphique en beignet

Les graphiques en beignets ressemblent beaucoup aux graphiques en secteurs, sauf qu’ils ont une partie de la découpe du milieu. Par défaut, ChartJS définit que 50% de la surface du graphique doit être laissée de côté. nous allons rester avec ce défaut. Le code pour créer le graphique en anneau est indiqué ci-dessous.

var data = [valeur: 20, couleur: "# 637b85", valeur: 30, couleur: "# 2c9c69", valeur: 40, couleur: "# dbba34", valeur: 10, couleur: "# c62f29"]; var canvas = document.getElementById ("heures"); var ctx = canvas.getContext ("2d"); nouveau graphique (ctx) .Doughnut (données);

Ici, vous pouvez voir que nous avons défini les données et les couleurs de notre graphique en anneau. C’est tout ce qui est nécessaire pour que le graphique en anneau fonctionne. Cependant, que représentent chacune des sections? Malheureusement, ChartJS ne dispose pas encore d’un moyen facile de définir des étiquettes pour le graphique en anneau. Cependant, nous pouvons créer notre propre légende pour décrire chacune des différentes sections. Modifier le code HTML du widget Donut pour inclure les éléments suivants.

Nous utilisons ces li par leurs classes très simplement dans le CSS, en utilisant la pseudo-classe ': before'.

.légende graphique ul style de liste: aucune; largeur: 100%; marge: 30px auto 0;  .chart-legend li text-indent: 16px; hauteur de ligne: 24px; position: relative; poids de la police: 200; bloc de visualisation; float: gauche; largeur: 50%; taille de police: 0.8em;  .chart-legend li: avant display: block; largeur: 10px; hauteur: 16px; position: absolue; gauche: 0; en haut: 3px; contenu: "";  .ship: before background-color: # 637b85;  .rework: before background-color: # 2c9c69;  .admin: before background-color: # dbba34;  .prod: before background-color: # c62f29; 

Ensuite, nous voulons avoir un beau "pouce levé" au centre du beignet. Cela implique quelques astuces CSS, notamment une version de Ol 'Padded Box de Uncle Dave pour que le cercle soit réactif. Nous utiliserons l'envergure avec la classe de .status pour atteindre ce cercle. Ajoutez les règles suivantes à main.css:

.widget.doughnut .status display: block; position: absolue; en haut: 50%; à gauche: 50%; largeur: 30%; hauteur: 0; rembourrage: 12%; rembourrage en bas: 18%; couleur: # 444; marge supérieure: -15%; marge gauche: -15%; taille de la police: 1.4em; poids de police: 700; text-align: center; rayon de bordure: 50%; couleur de fond: #aaa; background-image: url (data: image / jpeg; base64, iVBORw0KGgoAAAANSUhEUgAAAF8AAABkCAQAAABK + CQQAAAACXBIWXMAAFKnAABSpwHUSB + cAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8 / L5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N + QWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE + CDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9 / NocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A / hXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V / pHDBYY1hrFGNuayJsym740u2C + 02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT // ID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs + ZmX8xlz7PPryjYVPiuWLskq3RV2ZsK / cqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta + x / + 5Em0mzJ / + DGJ / t8AyNmf2zvs9JmHt6vvmC pYtEFrcu + bYsc / m9lSGrTq9xWbtvveWGbZtMNm / ZarJt + w6rnft3u + 45uy9s / 4ODOYd + Hmk / Jn58xUnrU + fOJJ / 9dX7SRe1LR68kXv13fc5Nm1t379TfU75 / 4mHeY7En + 59lvhB5efB1 / lv5dxc + NH0y / fzq64Lv4T8Ffp360 / rP8f9 / AA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA + f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAUYSURBVHja1JxdTBxVFMd / O7vssgvLtxIQKrSVQluNiqVp0xAepKSpiaFKVEyMD2oQNGisifFJ06TRN2xjS2Js0geNHy9am5q0wRhNLNZUwI9aQmtDMbUtSFsKLOyye3xgl8KyHwM7uzv3vwkk99yZ + TF759xzzz0DQko / z8kl8ckt + U26pEEciZ4vtfAu6ZE7GpUjcr9K + EUyIEs1JC2irf6MGqmUi5ywlvUcpnX1J0wtvhvXsrZC3qNeDfwcnBFa7 + FtclXAz8cRsb2BJhXwS7FHbHfwJBnmx6 + IatlCmdnxtRj4JdSYHd9JeVSbg01mx8 + jJIbV9INnDcUxrMWrYUkl / kbcMawOs + PXYYlhtZh78BRSG9M + + S8DM JupimkfNTd + U8yRD1fMPHhK2B3TPsegmfEfizMtjZsZv5QXscbscZ5hs + JrtPFInD6nuG1W / D10xPHqY5xc5bmTvjx / VIYlnj4VuxkzDZo0y99x4SekyYyJEqd0yqjE15fiNB9 + kXwoHh3wt2Sn + dJUZfKF + EWSE ++ + ThV8sX4s JTDuk4VvlwOiV8fElci1kuH3G3leZ88ZjjKd2Ixo / IL8hTix5R2d5btEJ3SjVUuD7r5fccNc + BZayNPZ9wrfJh5OGavKOHH9Yp1hyGz4u1mru + 9PeM2Fn0eL7oyBl3NGxOJGakecbMJSpzlmLnw7z0bYPYkmG5mJX9JmIP4Wdq6gt4smJsnEjg0NKxpa8LeFAH4C + PEX wwyzeLjNNB68SJijE6PgrRzipRUdMctsENoS / BD8GYplAvjxM8csk9xknBEG + J4 / F2WEDIt06uSapEL / yFuSbXTIZpNuSZW8clDcxuLv0LWuMko + 2T + / OjbG82TSTlEKc9U2XuUp48Z + s9yWVOu8bDDm7hfzBtmkWht4BZtmwMTXznbSoSfYmrjfb + QT7iI96k4Uv5LPqCNdupQYfj6HeJr0yWsLBlsFOCKGuoKHceaihMf7aSGdGrQI1NHJwxFLVQCm6KWL35e1V7CPZ + Jk7ZOr / 2hH6mUwro / tk5qFHE65VMhmeVn6JCDplF / eFStyUlfnriD + JumXYbkuc5JuHZcCwcY2XV / UVnKYAOysIZ / 06yr7GAdN53zpWigkEsygs / StZLFowVxyz5eVaaipB + cnS1Xxc + ggS1182MUelfEz6aRCXXx4iHaV8TVaVcaHTJXx / RxVGf8b3lcX / 2fe5Lqq + Bd5jQuq + n0P79CrbtAwwPGQ71Tz7ntVxl8bKuZWE788tPWtJr7G4 / M7Y6o6zu08oDJ + IbtUxodtZKqM78KqMv6PTKmL388Rdcf + ZfZyUVX8ETroUXXaGqYtFLCphz9KJycWT79qqZtjS6MHlTRNz9IMt1r4PqbCYze1ZFEZXwvfClQLX8L3dtTCH + Wayvifh7 / dStylo + 2qI8PClUDweXD55JXYdOBVMTPm7iTwv8r7zO1fBGG6dp1HHwGSYAGKKZKqqpYT1lFET5txHG6xfaIhQmYJF6PorzJi3008pfS1qsuCmmgmpqqOJe7iYracMqwAn2Rn4lM1SSURu1JHeK03wQ6S9feBacFFHOfWykmkpKyDW0NneMwxyIVu88X89jpwA7lmU75haEmagFMcuVQR6lrKOaGtZRSBZOHGRgW6iOXYmP9 / AvP / AxvdGfNkuS9vituMnBTS755JNHAfnkkUM22WSThQM7GWSQgQ0IIAQQfMwwzQ3GGOEC5 / idy / hiXeb / AQDtquZeJxF4 YgAAAABJRU5ErkJggg ==); répétition de fond: non répétée; taille du fond: 30%; position de fond: centre; 

L’élément le plus frappant est peut-être l’utilisation de l’URI de données pour l’image d’arrière-plan. Cela nous permet d’éviter une requête HTTP supplémentaire et est synonyme syntaxiquement d’utilisation d’une URL http réelle. Nous paramétrons également cet élément pour qu'il soit positionné absolument dans son élément .widget, que nous avons précédemment défini pour être position relative.

Passons maintenant à la définition de la typographie du widget. Nous n'utilisons que des éléments h3 et p à l'intérieur du widget; voici le css qui l'accompagne.

.widget p margin-top: 0; text-align: center;  .widget h3 marge: -12px 0 12px -12px; rembourrage: 12px; largeur: 100%; text-align: center; couleur: # 627b86; hauteur de ligne: 2em; arrière-plan: # d0dde3; 

Les règles de marge et de remplissage de l'élément h3 permettent à l'élément de s'étendre jusqu'au bord de l'élément de widget au-dessus du 12px de remplissage du widget. Nous avons également défini la marge supérieure sur 0 sur l'élément p pour qu'elle soit plus proche de l'en-tête du widget..

Le graphique en courbes

L'une des fonctionnalités les plus utiles de ChartJS est que certains graphiques permettent l'utilisation de plusieurs jeux de données. Ces jeux de données seront dessinés sur le même graphique séquentiellement, ce qui permettra de comparer un jeu de données à un autre. Les graphiques en courbes constituent un exemple parfait de cette utilité. Nous allons utiliser deux jeux de données pour explorer cette fonctionnalité.

var data = libellés: ["lun", "mar", "mer", "jeu", "ven", "sam", "dim"], jeux de données: [fillColor: "rgba (99,123,133,0.4)" , strokeColor: "rgba (220,220,220,1)", pointColor: "rgba (220,220,220,1)", pointStrokeColor: "#fff", données: [65,54,30,81,56,55,40],  fillColor: "rgba (219,186,52,0,4)", strokeColor: "rgba (220,220,220,1)", pointColor: "rgba (220,220,220,1)", pointStrokeColor: "#fff", données: [20,60,42 , 58,31,21,50],] var canvas = document.getElementById ("expéditions"); var ctx = canvas.getContext ("2d"); nouveau graphique (ctx) .Line (données, options);

Quelques points à noter dans ce nouveau code: d’abord, nous réutilisons les variables que nous avons utilisées pour construire le graphe en anneau. Ceci est totalement valide en JavaScript et réduit légèrement la mémoire utilisée par le script. Toutefois, cela risque de semer la confusion et si vous envisagez d'adapter ce code à une utilisation en production, il peut s'avérer plus efficace d'utiliser de nouvelles variables pour chaque nouveau graphique créé..

Ensuite, le graphique linéaire prend en charge les étiquettes. Ceci est important car cela nous permet d'éviter de créer des légendes basées sur HTML. Cependant, il est également important que les points de données soient alignés avec les étiquettes données. Dans cet exemple, notre premier point de données dans le premier jeu de données, 65, correspond à "Mon" dans les étiquettes..

Enfin, nos fillColors pour ces jeux de données sont des versions RGBa des couleurs définies précédemment (bleu foncé et jaune). Nous avons trouvé les valeurs RVB en saisissant les couleurs dans le sélecteur de couleurs de Photoshop, mais vous pouvez le faire à l'aide de l'un des nombreux outils colorpicker..

Nous ajouterons également des balises pour quelques boutons et une plage lisible par l'homme. Le code HTML de la ligne finale ressemble à ce qui suit.

Nous pouvons peaufiner le code HTML supplémentaire et aider les utilisateurs à associer les dates avec le code CSS suivant:

.widget.line p span color: # dbba34;  .widget.line p strong color: # 637b85; poids de la police: 400; 

Graphique radar

Les graphiques radar sont utiles pour distiller une sélection de variables en un graphique lisible de manière singulière pour obtenir une perception générale de l'interaction entre les différentes variables. Dans notre exemple, par exemple, nous explorerons l'idée de service à la clientèle, en fonction du nombre de fois que certains mots clés sont mentionnés. Sur un graphique radar, les points tracés créeront une forme. Cette forme peut nous donner une idée globale de l'efficacité du service à la clientèle..

Voyons comment cela est créé! Encore une fois, nous allons réutiliser nos variables d'avant.

var data = labels: ["Helpful", "Friendly", "Kind", "Rude", "Slow", "Frustrating"], jeux de données: [fillColor: "rgba (220,220,220,0.5)", strokeColor: " # 637b85 ", pointColor:" # dbba34 ", pointStrokeColor:" # 637b85 ", données: [65,59,90,81,30,56] var canvas = document.getElementById (" départements "); var ctx = canvas.getContext ("2d"); nouveau graphique (ctx) .Radar (données, options);

Et le code HTML d'accompagnement ressemblera à ceci:

Intuitivement, nous pouvons comprendre qu'une forme qui se trouve plus haut et plus à droite sera meilleure qu'une forme qui se trouve plus bas et à gauche. Cependant, nous ne perdons pas les données spécifiques disponibles dans le graphique à un niveau granulaire et à une variable. Dans ce cas, le mot "grossier" est souvent mentionné, mais le sens général du service à la clientèle semble positif, basé sur d'autres mots clés..

Rendre tout réactif

Nous avons déjà configuré nos éléments de canevas pour qu'ils soient réactifs avec le JavaScript que nous utilisions pour répondre au redimensionnement de la fenêtre. Nous devons maintenant rendre notre CSS réactif à l'aide de requêtes multimédia. Voici le css que nous allons utiliser pour cela.

Écran @média uniquement et (largeur minimale: 300px) .container width: 300px; marge: 0 auto;  @Media only screen et (min-width: 600px) .container width: 580px; marge: 0 auto;  .third float: left; largeur: 47,5%; marge gauche: 5%;  .third: premier enfant margin-left: 0;  .third: last-child display: block; largeur: 100%; marge gauche: 0;  @Media only screen et (min-width: 960px) .container width: 940px;  .third float: left; largeur: 30%; marge gauche: 2,5%; marge droite: 2,5%;  .third: premier enfant margin-left: 0;  .third: dernier-enfant marge-droite: 0; marge gauche: 2,5%; largeur: 30%;  @Media only screen et (min-width: 1140px) .container width: 1120px;  @Media only screen et (min-width: 1360px) .container width: 1300px; 

La première chose à noter à propos de ce CSS est que toutes les requêtes multimédia sont uniquement basées sur min-width. Cela signifie que nous concevons des écrans de largeur minimale et ajoutons de nouvelles règles à mesure que nous progressons. Notre conception ne nécessite pas beaucoup de modifications à chaque point de rupture, mais ce modèle est une pratique exemplaire dans les conceptions de toutes les échelles..

Nous pouvons constater des modifications de mise en page de base à chaque point d'arrêt, y compris la largeur de l'élément conteneur principal ainsi que notre traitement de la classe .third, que nous utilisons sur chacun des widgets. En dessous de 400, nous empilons tous les widgets. Entre 400 et 600, nous fabriquons les deux premiers widgets avec des colonnes demi-largeur et le troisième widget (le graphique radar) sur toute la largeur. Enfin, au-dessus de 960, nous utilisons trois colonnes en ligne.

Conclusion

Ce didacticiel vous a expliqué les étapes de base de la création d’un tableau de bord à l’aide de ChartJS. Les concepts fondamentaux décrits ici devraient vous aider à créer des projets plus complexes à l’aide de ChartJS et devraient également vous inciter à envisager une conception réactive dans une perspective ascendante..

Quelles expériences avez-vous eues avec les bibliothèques de cartographie? Utilisez-vous SVG ou un canevas pour créer des graphiques? Que souhaiteriez-vous que ChartJS fasse? Ajoutez vos commentaires ci-dessous!

Apprendre JavaScript: le guide complet

Nous avons créé un guide complet pour vous aider à apprendre le JavaScript, que vous soyez débutant en tant que développeur Web ou que vous souhaitiez explorer des sujets plus avancés..