Ceci est le code prêt à l'emploi pour commencer immédiatement à créer des graphiques avec Chart.js. C'est la base de Chart.js. Pour commencer, assurez-vous d'avoir ceci prêt.
Commencer avec Chart JS
Il suffit de copier le code ci-dessous, et il créera instantanément un graphique.
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Getting Started with Chart JS with www.chartjs3.com</title> <style> * { margin: 0; padding: 0; font-family: sans-serif; } .chartMenu { width: 100vw; height: 40px; background: #1A1A1A; color: rgba(54, 162, 235, 1); } .chartMenu p { padding: 10px; font-size: 20px; } .chartCard { width: 100vw; height: calc(100vh - 40px); background: rgba(54, 162, 235, 0.2); display: flex; align-items: center; justify-content: center; } .chartBox { width: 700px; padding: 20px; border-radius: 20px; border: solid 3px rgba(54, 162, 235, 1); background: white; } </style> </head> <body> <div class="chartMenu"> <p>WWW.CHARTJS3.COM (Chart JS <span id="chartVersion"></span>)</p> </div> <div class="chartCard"> <div class="chartBox"> <canvas id="myChart"></canvas> </div> </div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script> <script> // setup const data = { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], datasets: [{ label: 'Weekly Sales', data: [18, 12, 6, 9, 12, 3, 9], backgroundColor: [ 'rgba(255, 26, 104, 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)', 'rgba(0, 0, 0, 0.2)' ], borderColor: [ 'rgba(255, 26, 104, 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)', 'rgba(0, 0, 0, 1)' ], borderWidth: 1 }] }; // config const config = { type: 'bar', data, options: { scales: { y: { beginAtZero: true } } } }; // render init block const myChart = new Chart( document.getElementById('myChart'), config ); // Instantly assign Chart.js version const chartVersion = document.getElementById('chartVersion'); chartVersion.innerText = Chart.version; </script> </body></html>Chart JS blocks
La documentation de Chart JS se dirige vers l'utilisation de blocs. Par défaut, il y a 3 blocs : le bloc de configuration ou de données, le bloc de configuration, et le bloc de rendu ou d'initialisation (init). Ces 3 blocs sont considérés comme la structure de base d'un graphique.
Vous pouvez avoir plus de blocs si nécessaire. Des blocs supplémentaires sont généralement ajoutés lorsque certaines parties deviennent plus complexes ou étendues.
Bloc de Configuration ou Bloc de Données
Le bloc de configuration est également considéré comme le bloc de données. Ce bloc est essentiellement une variable constante (const) qui contient plusieurs objets JavaScript liés aux données. Cela peut inclure des points de données, des étiquettes, des couleurs de fond, des couleurs au survol, et bien plus encore.
D'autres valeurs constantes (const) liées aux valeurs ou aux points de données d'un graphique peuvent également être placées ici. Le bloc de configuration ou de données ressemble à ceci et devrait toujours être la première partie à être chargée, car tous les autres blocs dépendent du bloc de données.
// setup const data = { labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], datasets: [{ label: 'Weekly Sales', data: [18, 12, 6, 9, 12, 3, 9], backgroundColor: [ 'rgba(255, 26, 104, 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)', 'rgba(0, 0, 0, 0.2)' ], borderColor: [ 'rgba(255, 26, 104, 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)', 'rgba(0, 0, 0, 1)' ], borderWidth: 1 }] };Bloc de Configuration
Le bloc de configuration contient toutes les configurations d'un graphique. Le bloc de configuration doit être placé avant le bloc de rendu. Comme ce bloc a tendance à dépendre du bloc de données en raison de data const variable.
Les trois principales parties sont le type de graphique, les options et la variable de données qui est liée au bloc de configuration ou de données. Vous pouvez voir dans le code que "data" est une variable qui utilise du code JavaScript ES6.
// config const config = { type: 'bar', data options: { scales: { y: { beginAtZero: true } } } };Nous utilisons "data" uniquement si nous avons une valeur d'objet qui est ÉGALE à la variable constante. Si la constante et la variable de l'objet sont identiques, nous pouvons faire cela. Cela signifie que le texte précédent est une abréviation.
Si la constante diffère dans ce cas, nous devons écrire le code complet comme ceci. Vous voyez maintenant que la constante et la valeur de l'objet diffèrent, nous devons donc écrire le code de manière plus étendue. Voir ci-dessous.
// config const config = { type: 'bar', data: data2, options: { scales: { y: { beginAtZero: true } } } };Bloc de Rendu ou Bloc d'Initialisation
Le dernier bloc qui devrait toujours être placé en dernier est le bloc de rendu ou d'initialisation. Ce bloc dessine le graphique dans le canevas en fonction de tout le code précédent. Cela signifie que tous les blocs doivent être chargés avant que ce bloc ne se charge. Sinon, cela pourrait entraîner une erreur et exclure certains blocs de code.
// render init block const myChart = new Chart( document.getElementById('myChart'), config );Le code `getElementById` fait référence à l'ID du canevas nommé dans le document HTML. Dans cet exemple, il est nommé "myChart", mais vous pouvez toujours le changer selon vos préférences. Assurez-vous simplement de faire correspondre correctement le nom de l'ID du canevas.
