javascript - ejemplos - chart.js Error al crear el gráfico: no se puede adquirir el contexto del elemento dado

graficas html javascript

Question

Nunca entré en nodo, así que estoy bastante seguro de que estoy haciendo algo muy mal aquí, ya que no puedo encontrar ninguna información en Google.

Tengo un sitio de django y quería una biblioteca de gráficos JS, elegí chart.js.

Instalé y me gustan los documentos, pero después de eso no estoy seguro de qué hacer, así que traté de llenar los espacios en blanco y seguir su guía tanto como sea posible. Aquí es como se ve mi html ...

<script src="/public/node_modules/chart.js/dist/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
console.log(ctx);
var options = {}
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: ''butt'',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: ''miter'',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
}
]
};
var myChart = new Chart({
type: ''line'',
data: data,
options: options
})
</script>

Solo estoy tratando de hacer que un ejemplo funcione. Coloqué el directorio node_modules que se descargó a través de npm en algún lugar donde mi servidor los serviría ... y verificé que se están procesando, pero luego aparece este error cuando intento crear un gráfico. Tomé todos los códigos de la tabla de sus documentos, así que estoy bastante seguro de que la parte es correcta, pero no puedo ver por qué recibo este error.

Answer 1

Llego un poco tarde a la fiesta, pero si otros desarrolladores llegan a esta publicación, asegúrate de no hacer referencia al documento o la ventana. El equipo angular no fomenta el acceso directo a la variable dom. Use ElementRef en su lugar

import { Component, OnInit, ElementRef } from ''@angular/core'';
@Component({
selector: ''my-compo'',
templateUrl: ''mycompo.html'',
})
export class MyCompo implements OnInit {
myChart:any;
constructor(private elementRef: ElementRef) {
}
ngOnInit(){
this.chartit();
}
chartit(){
let htmlRef = this.elementRef.nativeElement.querySelector(`#yourCavasId`);
this.myChart = new Chart(htmlRef, {
//your data here
});
}
}

HTML sugerido por @mavroprovato

<canvas id="yourCavasId" ></canvas>

Answer 2

No está pasando el contexto ( ctx ) al llamar al constructor.
Esta sería la forma correcta de crear un nuevo gráfico:

 <canvas id="myChart"></canvas>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx,{
type: ''line'',
data: data,
options: options
})

Answer 3

Otra razón para obtener el mismo error, es si el elemento referido por el id no es un <canvas> . Tenía un elemento <div> en mi fuente HTML y, por supuesto, no funcionó.

Answer 4

puedes usar

añade esto en tu plantilla
<canvas #myCanvas width="500" height="300"></canvas>

agrega esto a tu componente

@ViewChild(''myCanvas'') canvasRef: ElementRef;
constructor()

cuando esté listo para dibujar llama a esto

 this.ctx = this.canvasRef.nativeElement.getContext(''2d'');
this.chart = new Chart(this.ctx, {....})