`<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0/chart.min.js"></script> <script src="./chartjs-plugin-annotation-0.5.7/chartjs-plugin-annotation.min.js"></script> </head> <body> <canvas id="myChart" width="500" height="200"></canvas> <script> const myChart = new Chart( document.getElementById('myChart'), config ); const config = { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] }, options }; const options = { plugins: { autocolors: false, annotation: { annotations: { line1: { type: 'line', yMin: 60, yMax: 60, borderColor: 'rgb(255, 99, 132)', borderWidth: 2, } } } } }; </script> </body> </html>`Quería usar chartjs-plugin-anotation.
así que puse chart.js 3.0.0 y chartjs-plugin-anotation.
pero no muestra ningún gráfico.
Copié varios códigos de muestra además de este, pero como resultado, chartjs-plugin-anotation no funcionó
¿Cuál es el problema?
Las options y la config de las constantes deben declararse antes de que se utilicen. Asegúrese también de usar las últimas versiones de las Chart.js y chartjs-plugin-annotation y verifique que ambos enlaces ( script.src ) sean válidos.
Eche un vistazo a su código modificado y vea cómo funciona.
const options = { plugins: { autocolors: false, annotation: { annotations: { line1: { type: 'line', yMin: 60, yMax: 60, borderColor: 'rgb(255, 99, 132)', borderWidth: 2 } } } } }; const config = { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] }, options }; const myChart = new Chart('myChart', config); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script> <canvas id="myChart" width="500" height="200"></canvas>