Estoy tratando de usar axios para obtener datos para mi gráfico, pero no podía saber cómo hacer que apareciera en el lienzo, puedo ver los valores en el archivo console.log como se muestra a continuación.
Console.log , no estoy muy seguro de lo que está sucediendo, aquí está mi código:
mounted(){ const ctx = document.getElementById('myChart'); let myData = []; const myChart = new Chart(ctx, { type: 'line', data: { labels: [....], datasets: [{ data: this.myData, backgroundColor: [ ['blue']], }] }, options: {.....} }); myChart;aquí está el método:
created: function(){ this.getData();} , methods: { getData : function(){ axios.get('http://localhost:3000/Chart/chartjs') .then(resp => {this.myData = resp.data console.log(resp.data); }) }su problema está relacionado con los fundamentos de reactividad de VueJS. Como está declarando una variable local en el método montado e intentando acceder a la propiedad myData en esto sin declararla en el componente, VueJS no actualizará la interfaz de usuario.
Por la forma en que presentó su código, asumiré que está utilizando VueJS3 con la API de opciones.
Para tener un componente reactivo, debe declarar un estado reactivo. Esto generalmente se hace antes del método montado().
export default { data() { return { myData: [] } }, mounted() { ... Luego, en sus métodos montados y getData, en lugar de declarar myData, debe usar this.myData . VueJS se encargará de la reactividad.
Además, noté que estás tratando de acceder directamente al DOM. Esto no es habitual ni recomendado en VueJS. Debe usar un enlace para asegurarse de que sus propiedades se actualicen correctamente.