chartJS饼图在axios获得后不更新
chartJS饼图在axios获得后不更新
提问于 2018-05-18 21:42:51
在我的Vue应用程序中，我正在加载一个页面，它从我的Flask后端抓取一些数据。我绘制了一组元素，并根据从后端返回的3个值的数组绘制了饼图。当我得到响应时，我更新了this.pie_data，我认为这将在我的模板中更新，以反映饼图。它呈现在this.nvrs中设置的元素，所以不确定为什么它不适用于我的饼图。
感谢你的帮助。
模板
<div class="box">
<p class="title">System Overview</p>
<chart :type="'pie'": data=chartData></chart>
</div>脚本
import axios from 'axios'
import Chart from 'vue-bulma-chartjs'
export default {
name: 'NVR_Overview',
components: {
Chart,
},
data: () => ({
nvrs: [],
// Health, Down, Warn
pie_data: [],
}),
methods: {
goToNVR (nvrId)
{
let wpsId = this.$route.params['wpsId']
let path = '/wps/' + wpsId + '/nvr/' + nvrId
this.$router.push(path)
},
},
created ()
{
axios
.get('http://localhost:5000/wps/' + this.$route.params['wpsId'])
.then(response =>
{
this.nvrs = response.data['nvr_list']
this.pie_data = response.data['pie_data']
console.log(this.pie_data)
})
.catch(e =>
{
console.log(e)
})
},
computed: {
chartData ()
{
return {
labels: ['Healthy', 'Down', 'Warning'],
datasets: [
{
data: this.pie_data,
backgroundColor: ['#41B482', '#ff4853', '#FFCE56'],
},
],
}
},
},
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-19 00:52:17
解决方案1:当您进行更改时，复制旧图表数据引用(旧数据有观察者，所以不要创建已完成的新对象)，而不是使用计算值，使用watch：
<template>
<div class="box">
<p class="title">System Overview</p>
<chart :type="'pie'" :data="chartData"></chart>
</div>
</template>
<script>
import axios from 'axios'
import Chart from 'vue-bulma-chartjs'
export default {
name: 'NVR_Overview',
components: {
Chart,
},
data: () => ({
nvrs: [],
// Health, Down, Warn
pie_data: [],
chartData: {
labels: ['Healthy', 'Down', 'Warning'],
datasets: [
{
data: [],
backgroundColor: ['#41B482', '#ff4853', '#FFCE56'],
},
]
}
}),
methods: {
goToNVR (nvrId)
{
let wpsId = this.$route.params['wpsId']
let path = '/wps/' + wpsId + '/nvr/' + nvrId
this.$router.push(path)
},
},
created ()
{
axios
.get('http://localhost:5000/wps/' + this.$route.params['wpsId'])
.then(response =>
{
this.nvrs = response.data['nvr_list']
this.pie_data = response.data['pie_data']
console.log(this.pie_data)
})
.catch(e =>
{
console.log(e)
})
},
watch: {
pie_data (newData) {
const data = this.chartData
data.datasets[0].data = newData
this.chartData = {...data}
}
},
}
</script>您可以在vue-bulma-chartjs存储库https://github.com/vue-bulma/chartjs/pull/24上检查此问题。
解决方案2：向图表中添加参考
<chart ref="chart" :type="'pie'" :data="data"</chart>然后在分配数据后的脚本中：
this.$nextTick(() => {
this.$refs.chart.resetChart();
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50419627
复制相关文章
相似问题
腾讯云开发者
