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.
French 
English 
Chinese 
German 
Korean 
Portuguese (Portugal) 
Portuguese (Brazil) 
Spanish 
Vietnamese
2 réponses sur « Getting Started »
Its nice and working fine but is not working when creating another chart using the same technique in a same page. I need similar charts to be created 3 times in a single page showing different stats. Can you show how to do that?
Thank you for your question. You issue is ES6 shorthands. Make sure you watch the video on this page where I explain this.
Else you can watch this video:
https://youtu.be/CjlllW2RUrA