Este es el código preconstruido para obtener instantáneamente los bloques hechos. Esta es la base de Chart.js. Para comenzar con él, asegúrese de tenerlo listo.
Comenzando con Chart JS
Simplemente copia el siguiente código y se creará instantáneamente un gráfico.
<!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>Bloques de Chart JS
La documentación de Chart JS se está moviendo hacia bloques. Por defecto, tiene 3 bloques. Estos son el bloque de configuración o de datos, el bloque de configuración y el bloque de renderización o de inicialización. Estos 3 bloques se consideran el esqueleto de un gráfico.
Puedes tener más bloques si es necesario. Los bloques adicionales suelen agregarse una vez que ciertas partes se vuelven más extensas.
Bloque de Configuración o Bloque de Datos de Configuración
El bloque de configuración también se considera el bloque de datos. Este bloque es básicamente una constante (variable constante) que consiste en múltiples objetos de JavaScript relacionados con los datos. Esto puede ser cualquier cosa, desde puntos de datos, etiquetas, colores de fondo, colores de resaltado y más.
Otros valores const también pueden ser colocados aquí que se relacionen con los valores o puntos de datos de un gráfico. El bloque de configuración o bloque de datos se ve así y siempre debería ser la primera parte en cargarse, ya que todos los otros bloques dependen del bloque de datos.
// 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
}]
};Bloque de Configuración
La configuración o bloque de configuración consiste en todas las configuraciones de un gráfico. La configuración debe colocarse antes del bloque de renderización, ya que este bloque tiende a depender del bloque de datos debido a la "data" const variable. (variable constante).
Las tres partes principales son el tipo de gráfico, las opciones y la variable de datos que se vincula al bloque de configuración o de datos. En el código se puede ver que"data"es una variable que utiliza el código de Javascript ES6.
// config
const config = {
type: 'bar',
"data",
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};Utilizamos"data",solo si tenemos un valor de objeto que es IGUAL a la variable constante. Si la variable constante y la variable de objeto son idénticas, podemos hacer esto. Esto significa que el texto superior es una forma abreviada.
Si la constante difiere en ese caso, necesitamos escribirlo en código completo como este. Ahora puedes ver que la constante y el valor del objeto difieren, por lo que necesitamos escribir el código de manera más extensa. Ver abajo.
// config
const config = {
type: 'bar',
"data": data2,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};Bloque de Renderizado o Inicialización
El último bloque que siempre debe estar al final es el bloque de renderizado o inicialización. Este bloque dibuja el gráfico en el lienzo (canvas) según todo el código anterior. Esto significa que todos los bloques deben cargarse antes de que se cargue este bloque. De lo contrario, dará un error y podría excluir ciertos bloques de código.
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);El código getElementById se refiere al id del canvas que se nombra en el documento HTML. En este ejemplo, se llama "myChart", pero siempre puedes cambiarlo a cualquier cosa que prefieras. Solo asegúrate de que el nombre del id del canvas coincida correctamente.
Spanish 
English 
Chinese 
French 
German 
Korean 
Portuguese (Portugal) 
Portuguese (Brazil) 
Vietnamese
2 respuestas a «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