我有一个问题，当我添加一个新的数据集时，vue 3 vue-chartjs没有更新数据。基本上，数据不是React性的。如果我用数据集添加一个新的硬编码对象，它就可以工作，但是当它使用数组推送添加时就不行了。我尝试了我能想到的任何方法，包括使用标签数组和数据集数组重新创建对象，并将其添加到新的var对象中。
谢谢你的时间，ukw
<template>
<Radar id="my-chart-id-1" :options="BarChartOptions" :data="BarData" />
<button type="button" @click="addNewData">Add</button>
</template>
<script lang="ts">
import { mapActions } from "pinia";
import { defineComponent } from 'vue'
import { Radar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, RadialLinearScale, PointElement, LineElement, Filler } from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, RadialLinearScale, PointElement, LineElement, Filler)
export default defineComponent({
setup() {
},
components: {
Radar,
},
data() {
return {
BarChartOptions: {
scale: {
min: 0,
max: 100,
},
responsive: true,
elements: {
line: {
borderWidth: 1
}
},
scales: {
r: {
grid: {
color: '#CCCCCC'
},
}
}
},
BarData: {
labels: [
'1. Title',
'2. Title',
'3. Title',
'4. Title',
'5. Title',
],
datasets: [{
label: 'First',
data: [10, 30, 30, 30, 30],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}
]
},
},
methods: {
addNewData() {
let obj = {
label: 'test',
data: [50, 50, 50, 50, 50],
fill: true,
backgroundColor: 'rgba(155, 99, 132, 0.5)',
borderColor: 'rgb(155, 99, 132)',
pointBackgroundColor: 'rgb(155, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}
this.BarData.datasets.push(obj);
}
});
</script>
1条答案
按热度按时间t98cgbkg1#
vue-charts似乎并不具有很强的React性。对嵌套属性（如
datasets）的更改不会像您期望的那样触发更新。可能的解决方法是重新分配整个数据对象。