Diferencias

Muestra las diferencias entre dos versiones de la página.

--- informatica:programacion:javascript:chartjs [2021/12/07 16:45] – creado tempwin
+++ informatica:programacion:javascript:chartjs [2023/11/09 11:25] (actual) – [Título ejes de coordenadas] tempwin
@@ Línea 4: / Línea 4: @@
   * [[https://www.chartjs.org|Web oficial]]
+===== Ejemplo =====
+<code html5>
+<div>
+  <canvas id="myChart"></canvas>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+  const ctx = document.getElementById('myChart');
+  new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+      datasets: [{
+        label: '# of Votes',
+        data: [12, 19, 3, 5, 2, 3],
+        borderWidth: 1
+      }]
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true
+        }
+      }
+    }
+  });
+</script>
+</code>
+===== Configuración =====
+==== Título gráfica ====
+La opción ''title'' dentro de ''plugins'' permite mostrar un título en la cabecera de la gráfica.
+<code javascript>
+const chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        plugins: {
+            title: {
+                display: true,
+                text: 'Custom Chart Title'
+            }
+        }
+    }
+});
+</code>
+==== Título ejes de coordenadas ====
+<code javascript>
+new Chart(ctx, {
+    (...)
+    options: {
+        scales: {
+            y: {
+                title: {
+                    display: true,
+                    text: "Velocidad"
+                }
+            },
+            x: {
+                title: {
+                    display: true,
+                    text: "Tiempo"
+                }
+            }
+        }
+    }
+});
+</code>