javascript - tutorial - vue-chartjs example

El componente Vue Chart.js no representa

Question

Dashboard obtiene una matriz de datos con 10 elementos como propiedad chdata . Cada matriz de 0.5 s se actualiza con un nuevo elemento. Puedo ver que los datos están cambiando en el conjunto de datos, pero el gráfico no se muestra.

También obteniendo este error Uncaught TypeError: Cannot read property ''skip'' of undefined cuando se pasa el mouse.

//LineChart.vue
<script>
import {
Line,
mixins
} from ''vue-chartjs''
export default Line.extend({
mixins: [mixins.reactiveData],
props: ["options"],
data() {
return {
chartData: {
labels: [''0'', ''1'', ''2'', ''3'', ''4'', ''5'', ''6'', ''7'', ''8'', ''9''],
datasets: [{
label: ''Data One'',
borderColor: ''#e67e22'',
pointBackgroundColor: ''#e67e22'',
borderWidth: 1,
pointBorderColor: ''#e67e22'',
backgroundColor: ''transparent'',
data: this.$root.$data.chdata
}]
},
}
},
mounted() {
this.renderChart(this.chartData, {
responsive: true,
maintainAspectRatio: false,
animation: false,
//Boolean - If we want to override with a hard coded scale
scaleOverride: true,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps: 20,
//Number - The value jump in the hard coded scale
scaleStepWidth: 10,
//Number - The scale starting value
scaleStartValue: 0
});
},
watch: {
chartData: function() {
this._chart.destroy()
this.renderChart(this.data, this.options)
// this._chart.update()
}
}
});
</script>

Hice esto en mounted() :

var self = this;
self.set = setInterval(function() {
self._chart.update()
}, 200);

Y no estoy feliz con eso.

Answer 1

El problema es que no estás actualizando las etiquetas. Usted define 10 elementos en su matriz de etiquetas. Esto funciona para 10 entradas de datos.

Si inserta una nueva entrada en su matriz de datos, también debe agregar una nueva etiqueta. De lo contrario, chart.js lanzará este error.