如何解决vue-chart.js未在array.push上更新
我正在使用vue-chartjs在我的网站上显示折线图。当我单击一个按钮时,它应该向图表添加另一个值。数据集已更新,但图表未更新。
LinieChart.vue
<script>
import { Line,mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,mixins: [reactiveProp],props: {
options: {
type: Object,default: null
}
},mounted () {
this.renderChart(this.chartData,this.options)
},methods: {
}
}
</script>
我将此添加到了 dashboard.vue 图表的显示位置
<line-chart
ref="LineChart"
:chart-data="chartdata"
:options="options"
class="h-64"
/>
JavaScript:
<script>
export default {
middleware: 'auth',layout: 'dashboard',name: 'Dashboard',components: {
temporaryDisableModal,LineChart
},data: () => ({
sensors: [],sensorTypes: [],valueTypes: [],measurements: [],websockets: [],lastMeasurements: null,loaded: false,chartdata: null,options: {
maintainAspectRatio: false,responsive: true
}
}),beforeMount () {
},async mounted () {
this.fillData()
const self = this
// self.fillData()
await self.getSensors()
self.loaded = false
self.loaded = true
console.log('Sensors:')
console.log(self.sensors)
console.log(self.sensors.length)
for (let i = 0; i < self.sensors.length; i++) {
console.log(i)
console.log('Subscribed to ' + self.sensors[i].id)
self.measurements[self.sensors[i].id] = []
console.log(self.measurements)
window.Echo.channel('measurement.' + self.sensors[i].id).listen('.App\\Events\\WebsocketMeasurements',(e) => {
console.log('Data:')
console.log(e)
self.websockets.push(e.measurement)
self.measurements[self.sensors[i].id].push(e.measurement)
console.log(self.measurements)
})
}
},methods: {
log () {
this.chartdata.labels.push(10)
this.chartdata.datasets[0].data.push(10)
this.chartdata.datasets[1].data.push(10)
},fillData () {
this.chartdata = {
labels: this.getRandomInt(),datasets: [
{
label: 'value_1',borderColor: 'rgba(131,24,48,1)',backgroundColor: 'rgba(131,0.3)',data: this.getRandomInt()
},{
label: 'value_2',borderColor: 'rgba(216,42,81,backgroundColor: 'rgba(216,data: this.getRandomInt()
}
]
}
},getRandomInt () {
let array = []
for (let i = 0; i < 100; i++) {
array.push(Math.floor(Math.random() * (6) * Math.random() * 3 * Math.random() * 9) + 15)
}
console.log(array)
return array
},// other functions...
</script>
因此,当我执行功能log()
时,应将值10
作为标签和一行中的点添加。它被添加到数据集中,而不是添加到图表中。
当我执行log()
函数时,悬停图表时出现错误:
Chart.js?30ef:6719 Uncaught TypeError: Cannot read property 'skip' of undefined
当我还没有执行该功能时,不会发生这种情况。
解决方法
这是vuecharts的一个已知问题,而不是修改数据上的嵌套元素,而是一直重新分配它们,所以,代替这个:
this.chartdata.labels.push(10)
this.chartdata.datasets[0].data.push(10)
this.chartdata.datasets[1].data.push(10)
执行此操作:
this.chartdata.labels = MyNewArrayOfLabels
this.chartdata.datasets= [ //Me new array of datasets
{
label: 'value_1',borderColor: 'rgba(131,24,48,1)',backgroundColor: 'rgba(131,0.3)',data: this.getRandomInt()
},{
label: 'value_2',borderColor: 'rgba(216,42,81,backgroundColor: 'rgba(216,data: this.getRandomInt()
}
]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。