No hacer renderizar gráfico: "No puedo adquirir el contexto del artículo dado" -- javascript campo con vue.js campo con chart.js campo con vue-component campo con vuetify.js camp Relacionados El problema

Failing to render chart – “can't acquire context from the given item”


0
vote

problema

Español

Estoy intentando cargar un gráfico de la biblioteca de las gráficos en mi aplicación VUE.JS y VUETIFIETE, pero se muestra el siguiente error:

Error al crear gráfico: no se puede adquirir el contexto del artículo dado

Luego, cuando intento agregar la función de .getcontext ("2d) no resuelve el error. El método montado parece estar funcionando bien, ya que tengo otras funciones que se ejecutan sin ningún problema y todo parece ser importado correctamente. He intentado con jquery, pero el mismo error aún persiste.

Aquí mis archivos para referencia: App.VUE:

lienzo de la plantilla:

  resources: [         { id: 'a', title: 'Auditorium A' },         { id: 'b', title: 'Auditorium B', eventColor: 'green' },         { id: 'c', title: 'Auditorium C', eventColor: 'orange' },         {             id: 'd', title: 'Auditorium D', children: [                 { id: 'd1', title: 'Room D1' },                 { id: 'd2', title: 'Room D2' }             ]         },         { id: 'e', title: 'Auditorium E' },         { id: 'f', title: 'Auditorium F', eventColor: 'red' },         { id: 'g', title: 'Auditorium G' },         { id: 'h', title: 'Auditorium H' },         { id: 'i', title: 'Auditorium I' },         { id: 'j', title: 'Auditorium J' },         { id: 'k', title: 'Auditorium K' },         { id: 'l', title: 'Auditorium L' },         { id: 'm', title: 'Auditorium M' },         { id: 'n', title: 'Auditorium N' },         { id: 'o', title: 'Auditorium O' },         { id: 'p', title: 'Auditorium P' },         { id: 'q', title: 'Auditorium Q' },         { id: 'r', title: 'Auditorium R' },         { id: 's', title: 'Auditorium S' },         { id: 't', title: 'Auditorium T' },         { id: 'u', title: 'Auditorium U' },         { id: 'v', title: 'Auditorium V' },         { id: 'w', title: 'Auditorium W' },         { id: 'x', title: 'Auditorium X' },         { id: 'y', title: 'Auditorium Y' },         { id: 'z', title: 'Auditorium Z' }     ],     events: [         { id: '1', resourceId: 'b', start: '2019-01-03T02:00:00', end: '2019-01-03T07:00:00', title: 'event 1' },         { id: '2', resourceId: 'c', start: '2019-01-03T05:00:00', end: '2019-01-03T22:00:00', title: 'event 2' },         { id: '3', resourceId: 'd', start: '2019-01-02', end: '2019-01-04', title: 'event 3' },         { id: '4', resourceId: 'e', start: '2019-01-03T03:00:00', end: '2019-01-03T08:00:00', title: 'event 4' },         { id: '5', resourceId: 'f', start: '2019-01-03T00:30:00', end: '2019-01-03T02:30:00', title: 'event 5' }     ], 2  

app.vue js:

  resources: [         { id: 'a', title: 'Auditorium A' },         { id: 'b', title: 'Auditorium B', eventColor: 'green' },         { id: 'c', title: 'Auditorium C', eventColor: 'orange' },         {             id: 'd', title: 'Auditorium D', children: [                 { id: 'd1', title: 'Room D1' },                 { id: 'd2', title: 'Room D2' }             ]         },         { id: 'e', title: 'Auditorium E' },         { id: 'f', title: 'Auditorium F', eventColor: 'red' },         { id: 'g', title: 'Auditorium G' },         { id: 'h', title: 'Auditorium H' },         { id: 'i', title: 'Auditorium I' },         { id: 'j', title: 'Auditorium J' },         { id: 'k', title: 'Auditorium K' },         { id: 'l', title: 'Auditorium L' },         { id: 'm', title: 'Auditorium M' },         { id: 'n', title: 'Auditorium N' },         { id: 'o', title: 'Auditorium O' },         { id: 'p', title: 'Auditorium P' },         { id: 'q', title: 'Auditorium Q' },         { id: 'r', title: 'Auditorium R' },         { id: 's', title: 'Auditorium S' },         { id: 't', title: 'Auditorium T' },         { id: 'u', title: 'Auditorium U' },         { id: 'v', title: 'Auditorium V' },         { id: 'w', title: 'Auditorium W' },         { id: 'x', title: 'Auditorium X' },         { id: 'y', title: 'Auditorium Y' },         { id: 'z', title: 'Auditorium Z' }     ],     events: [         { id: '1', resourceId: 'b', start: '2019-01-03T02:00:00', end: '2019-01-03T07:00:00', title: 'event 1' },         { id: '2', resourceId: 'c', start: '2019-01-03T05:00:00', end: '2019-01-03T22:00:00', title: 'event 2' },         { id: '3', resourceId: 'd', start: '2019-01-02', end: '2019-01-04', title: 'event 3' },         { id: '4', resourceId: 'e', start: '2019-01-03T03:00:00', end: '2019-01-03T08:00:00', title: 'event 4' },         { id: '5', resourceId: 'f', start: '2019-01-03T00:30:00', end: '2019-01-03T02:30:00', title: 'event 5' }     ], 3  

Script importado con datos de la tabla:

  resources: [         { id: 'a', title: 'Auditorium A' },         { id: 'b', title: 'Auditorium B', eventColor: 'green' },         { id: 'c', title: 'Auditorium C', eventColor: 'orange' },         {             id: 'd', title: 'Auditorium D', children: [                 { id: 'd1', title: 'Room D1' },                 { id: 'd2', title: 'Room D2' }             ]         },         { id: 'e', title: 'Auditorium E' },         { id: 'f', title: 'Auditorium F', eventColor: 'red' },         { id: 'g', title: 'Auditorium G' },         { id: 'h', title: 'Auditorium H' },         { id: 'i', title: 'Auditorium I' },         { id: 'j', title: 'Auditorium J' },         { id: 'k', title: 'Auditorium K' },         { id: 'l', title: 'Auditorium L' },         { id: 'm', title: 'Auditorium M' },         { id: 'n', title: 'Auditorium N' },         { id: 'o', title: 'Auditorium O' },         { id: 'p', title: 'Auditorium P' },         { id: 'q', title: 'Auditorium Q' },         { id: 'r', title: 'Auditorium R' },         { id: 's', title: 'Auditorium S' },         { id: 't', title: 'Auditorium T' },         { id: 'u', title: 'Auditorium U' },         { id: 'v', title: 'Auditorium V' },         { id: 'w', title: 'Auditorium W' },         { id: 'x', title: 'Auditorium X' },         { id: 'y', title: 'Auditorium Y' },         { id: 'z', title: 'Auditorium Z' }     ],     events: [         { id: '1', resourceId: 'b', start: '2019-01-03T02:00:00', end: '2019-01-03T07:00:00', title: 'event 1' },         { id: '2', resourceId: 'c', start: '2019-01-03T05:00:00', end: '2019-01-03T22:00:00', title: 'event 2' },         { id: '3', resourceId: 'd', start: '2019-01-02', end: '2019-01-04', title: 'event 3' },         { id: '4', resourceId: 'e', start: '2019-01-03T03:00:00', end: '2019-01-03T08:00:00', title: 'event 4' },         { id: '5', resourceId: 'f', start: '2019-01-03T00:30:00', end: '2019-01-03T02:30:00', title: 'event 5' }     ], 4  

En la compilación, se muestra el siguiente error:

  resources: [         { id: 'a', title: 'Auditorium A' },         { id: 'b', title: 'Auditorium B', eventColor: 'green' },         { id: 'c', title: 'Auditorium C', eventColor: 'orange' },         {             id: 'd', title: 'Auditorium D', children: [                 { id: 'd1', title: 'Room D1' },                 { id: 'd2', title: 'Room D2' }             ]         },         { id: 'e', title: 'Auditorium E' },         { id: 'f', title: 'Auditorium F', eventColor: 'red' },         { id: 'g', title: 'Auditorium G' },         { id: 'h', title: 'Auditorium H' },         { id: 'i', title: 'Auditorium I' },         { id: 'j', title: 'Auditorium J' },         { id: 'k', title: 'Auditorium K' },         { id: 'l', title: 'Auditorium L' },         { id: 'm', title: 'Auditorium M' },         { id: 'n', title: 'Auditorium N' },         { id: 'o', title: 'Auditorium O' },         { id: 'p', title: 'Auditorium P' },         { id: 'q', title: 'Auditorium Q' },         { id: 'r', title: 'Auditorium R' },         { id: 's', title: 'Auditorium S' },         { id: 't', title: 'Auditorium T' },         { id: 'u', title: 'Auditorium U' },         { id: 'v', title: 'Auditorium V' },         { id: 'w', title: 'Auditorium W' },         { id: 'x', title: 'Auditorium X' },         { id: 'y', title: 'Auditorium Y' },         { id: 'z', title: 'Auditorium Z' }     ],     events: [         { id: '1', resourceId: 'b', start: '2019-01-03T02:00:00', end: '2019-01-03T07:00:00', title: 'event 1' },         { id: '2', resourceId: 'c', start: '2019-01-03T05:00:00', end: '2019-01-03T22:00:00', title: 'event 2' },         { id: '3', resourceId: 'd', start: '2019-01-02', end: '2019-01-04', title: 'event 3' },         { id: '4', resourceId: 'e', start: '2019-01-03T03:00:00', end: '2019-01-03T08:00:00', title: 'event 4' },         { id: '5', resourceId: 'f', start: '2019-01-03T00:30:00', end: '2019-01-03T02:30:00', title: 'event 5' }     ], 5  
Original en ingles

I am attempting to load a chart from the charts.js library on my Vue.js and Vuetify application, but the following error is shown:

Failed to create chart: can't acquire context from the given item

Then when I attempt to addon the function of .getContext("2d) it does not resolve the error. The mounted method seems to be working fine, as I have got other functions running without any issues and everything seems to be imported correctly. I have tried with JQUERY, but the same error still persists.

Here my files for reference: app.vue:

Canvas from template:

 <canvas id="charting" width="600px" height="600px">  </canvas> 

app.vue JS:

 <script>  import Chart from '../../../../node_modules/chart.js'  import coinCharts from './scripts/charts/randomcoin.js'   export default {  data() {  return {  coinCharts: coinCharts  }  },  methods: {  createChart(id, chartData) {  const ctx = document.getElementById(id).getContext("2d");  const chartRender = new Chart(ctx, {  type:chartData.type,  data:chartData.data,  options: chartData.options  })}  },   mounted() {  this.createChart("charting", this.coinCharts);  }  } 

Imported script with chart data:

export const coinCharts =  new Chart({ type: 'line',  data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45] }] },  options: { responsive:true, lineTension:1 } })  export default coinCharts; 

On compiling, the following error is displayed:

Module Warning (from ./node_modules/eslint-loader/index.js): error: 'chartRender' is assigned a value but never used (no-unused-vars)  at src\components\views\coins\AlphaCoin.vue:50:11: createChart(id, chartData) { const ctx = document.getElementById(id).getContext("2d"); const chartRender = new Chart(ctx, { type:chartData.type, data:chartData.data, options: chartData.options 
              

Lista de respuestas

0
 
vote
vote
La mejor respuesta
 

Parece que le llaman un new Chart() dos veces. Una vez en los datos de su tabla randomcoin.js y también en su método randomcoin.js7 . Intente cambiar los datos de su tabla a un objeto como este:

  export const coinCharts = { type: 'line',  data: {   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],   datasets: [{     label: 'My First dataset',     backgroundColor: 'rgb(255, 99, 132)',     borderColor: 'rgb(255, 99, 132)',     data: [0, 10, 5, 2, 20, 30, 45]   }] },  options: {   responsive:true,   lineTension:1 } }  export default coinCharts;   

Esto debería resolver su problema.

 

It seem your calling a new Chart() twice. Once on your chart Data randomcoin.js and also on your createChart(id, chartData) method. Try to change your chart Data to an object like this:

export const coinCharts = { type: 'line',  data: {   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],   datasets: [{     label: 'My First dataset',     backgroundColor: 'rgb(255, 99, 132)',     borderColor: 'rgb(255, 99, 132)',     data: [0, 10, 5, 2, 20, 30, 45]   }] },  options: {   responsive:true,   lineTension:1 } }  export default coinCharts; 

This should solve your problem.

 
 

Relacionados problema

1  Cómo eliminar el relleno del elemento de la lista en Vuetify  ( How to remove padding of list item in vuetify ) 
Al codificar el proyecto VUE con VUETIFIET, encontré que hay un relleno inútil en la etiqueta <v-list> , en detalle, se trata de <v-list-tile> TAG. Image...

0  Me encontré con un problema de declaración de SIF en el método de Vuetify  ( I encountered an if statement problem in vuetify method ) 
He estado siguiendo un tutorial de Django + VUE.JS y he encontrado un problema al final. La tarea es publicar una nueva consulta si la identificación no exi...

0  VuEtify.js DatePicker Establecer Fechas permitidas para cada fecha de recepción  ( Vuetify js datepicker set allowed dates for each datepicker in array ) 
Tengo este método toalloweddates que permite que el DatePicker solo seleccione un rango de fecha que tenga un intervalo de solo 1 día. He estado tratando de...

2  Vuetify Styles con fugas  ( Vuetify styles leaking ) 
He construido una pequeña aplicación usando VUETIFIE, y lo estoy acoplando todo en bundle.min.js , incluyendo CSS. Sin embargo, al importar el paquete en un ...

1  Obtenga una variedad de fechas de hoy para DatePicker con JavaScript  ( Get an array of dates from today for datepicker with javascript ) 
Estoy tratando de escribir una función que devuelve una matriz de fechas de hoy hasta la fecha máxima, para que pueda restringir la selección del selector de ...

1  ¿Cómo prevenir el fondo gris con el botón VUETIFIETE que está usando el enlace del enrutador VUE?  ( How to prevent grey background with vuetify button that is using vue router link ) 
Al agregar enlace VUE-ROUTER, como to="/" a mi v-app-bar-nav-icon : <v-app-bar fixed app> <v-app-bar-nav-icon v-else to="/"> <v-icon>mdi-home-city...

0  Cómo sincronizar el componente UI de paginación con una matriz  ( How sync vuetify pagination ui component with an array ) 
Estoy tratando de implementar este ejemplo de paginación: HTTPS: //medium.com/@denny.headrick/pagination-in-vue-js-4bfce47e573b con la paginación de Vuetify...

0  ¿Cómo agregar el método de búsqueda / filtro en la tabla de datos V?  ( How to add search filter method in v data table ) 
Función de búsqueda y filtro en V-Data-Tabel usando por método de filtro e incluye método en JavaScript. Pero no funcionó. He comprobado a desarrollar la herr...

4  El error de tabla de datos V-Data no puede crear la propiedad ISROOTINSERT con datos remotos  ( V data table error cannot create property isrootinsert with remote data ) 
usando Ejemplo de documentación de v-data-table Obtención de errores TypeError: Cannot create property 'isRootInsert' on string ... usando el último VUE...

0  Pulsar el valor de la bomba de fuego para abandonar  ( Push firebase value to dropdown ) 
Estoy usando vuetify para crear mi abandono. Puedo seleccionar un valor, presionarlo a la base de datos de Firebase, pero actualizar la página no puedo rell...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos