图表 JS 不会使用 update() 方法动态更新新数据
[英] Chart JS isn't dynamically updating with new data with update() method
本文介绍了图表 JS 不会使用 update() 方法动态更新新数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在 Nuxt JS 项目中使用 Chart JS 和 Vue Chart JS 包装器.出于某种原因，尽管有新数据，但我的图表并未随新数据更新.我的图表设置了一个名为 LineChart.vue 的组件，以及一个名为 LineChart.js 的插件，位于我的 plugins 目录中.>
我的组件看起来像:
<div><折线图 :chart-data="customChartData";class="data-chart"></line-chart>
</模板><风格>.数据图表画布{宽度:100%！重要；高度:自动！重要；}</风格><脚本>从 '~/plugins/LineChart.js' 导入 LineChart导出默认{成分: {折线图},道具: {图表关键字:{类型:数字，默认值:0},通过...分组: {类型:字符串，默认值:'每小时'},标签: {类型:数组，默认值:空},数据集:{类型:数组，默认值:空},选项: {类型:对象，默认值:() =>({})}},数据 () {返回 {自定义图表数据:{}}},挂载(){this.fillData()},方法: {/*** 填写数据*/填充数据(){const labelsToUse = []const 标签 = this.labelsconst first = 标签[0]const last = 标签[labels.length - 1]让差异 = 0for (const [index, label] of labels.entries()) {const periodStart = this.$dayjs(Date.parse(first))const periodFinish = this.$dayjs(Date.parse(last))diff = periodFinish.diff(periodStart, 'day', true)如果(！差异){labelToUse.push(this.$dayjs.tz(label, this.$auth.user.timezone).format('MMM Do'))}labelToUse.push(this.$dayjs.tz(label, this.$auth.user.timezone).format(`${diff > 1 ? 'MMM Do' : 'HH:mm'}`))}this.customChartData = {标签:标签使用，数据集:this.datasets，选项:this.options}}}}
我的插件看起来像...
import { Line, mixins } from 'vue-chartjs'从'lodash'导入_；const {reactiveProp } = mixins导出默认{延伸:线，混合:[reactiveProp]，数据 () {返回 {选项: {响应:真实，保持纵横比:假，传奇: {显示:假},尺度:{y轴:[{网格线: {显示:真实，颜色:'#eceaea'},}],x轴:[{网格线: {显示:假},刻度:{自动跳过:真，maxTicksLimit: window.innerWidth <第575话2.1 : 4.1,最大旋转:0，最小旋转:0}}]},元素:{观点: {半径:0，命中半径:35}}}}},挂载(){this.renderLineChart()},方法: {/*** 获取图表选项*/getChartOptions() {返回 this.options},/*** 渲染折线图*/渲染线图(){const 选项 = this.getChartOptions()//this.chartdata是在mixin中创建的.//如果你想传递选项，请创建一个本地选项对象this.renderChart(this.localData, 选项)}},计算:{本地数据:函数(){返回 this.chartData}},手表: {图表数据:{处理程序:函数(val，oldval){const 选项 = this.getChartOptions()const clone = _.cloneDeep(this.localData)console.log(this.localData)this._data._chart.update()this.renderChart(克隆，选项)},深:真实}}}
当我在插件的 watch 方法中记录 console.log(this.localData) 时，我没有看到我的 labels 用新标签更新和从 :labels="server[Object.keys(server)[0]].history.labels" 推送到我的网页内的数据，我正在调用我的折线图，这是什么我失踪了?
调用我的图表组件的页面是:
<div class="bg-white p-6 rounded-md"><h3 class="text-md font-medium text-gray-900">{{ server[Object.keys(server)[0]].agent.agent }}</h3>
<hr v-if="server[Object.keys(server)[0]].history";/><div v-if="server[Object.keys(server)[0]].history";class=bg-white p-6 rounded-md"><h3 class="text-md font-medium text-gray-500 mb-3">空闲内存</h3><div class="chart chart--generic"><折线图:labels="server[Object.keys(server)[0]].history.labels";:datasets="[{填充:假，边框宽度:2.5，pointBackgroundColor: '#fff',边框颜色:'#5046e5'，数据:服务器[Object.keys(server)[0]].history.data，}]"/>
解决方案
更新数组标签后，您可以尝试调用 fillData() 方法.
希望它有效
I'm using Chart JS with the Vue Chart JS wrapper inside of my Nuxt JS project. For some reason, despite new data my chart isn't updating with new data. My charts are set up with a component named LineChart.vue, along with a plugin called LineChart.js inside of my plugins directory.
My component looks like:
<template>
<div>
<line-chart :chart-data="customChartData" class="data-chart"></line-chart>
</div>
</template>
<style>
.data-chart canvas {
width: 100% !important;
height: auto !important;
}
</style>
<script>
import LineChart from '~/plugins/LineChart.js'
export default {
components: {
LineChart
},
props: {
chartKey: {
type: Number,
default: 0
},
groupBy: {
type: String,
default: 'hourly'
},
labels: {
type: Array,
default: null
},
datasets: {
type: Array,
default: null
},
options: {
type: Object,
default: () => ({})
}
},
data () {
return {
customChartData: {}
}
},
mounted () {
this.fillData()
},
methods: {
/*
** Fill data
*/
fillData () {
const labelsToUse = []
const labels = this.labels
const first = labels[0]
const last = labels[labels.length - 1]
let diff = 0
for (const [index, label] of labels.entries()) {
const periodStart = this.$dayjs(Date.parse(first))
const periodFinish = this.$dayjs(Date.parse(last))
diff = periodFinish.diff(periodStart, 'day', true)
if (!diff) {
labelsToUse.push(this.$dayjs.tz(label, this.$auth.user.timezone).format('MMM Do'))
}
labelsToUse.push(this.$dayjs.tz(label, this.$auth.user.timezone).format(`${diff > 1 ? 'MMM Do' : 'HH:mm'}`))
}
this.customChartData = {
labels: labelsToUse,
datasets: this.datasets,
options: this.options
}
}
}
}
</script>
and my plugin looks like...
import { Line, mixins } from 'vue-chartjs'
import _ from 'lodash';
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
data () {
return {
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
display: true,
color: '#eceaea'
},
}],
xAxes: [{
gridLines: {
display: false
},
ticks: {
autoSkip: true,
maxTicksLimit: window.innerWidth < 575 ? 2.1 : 4.1,
maxRotation: 0,
minRotation: 0
}
}]
},
elements: {
point: {
radius: 0,
hitRadius: 35
}
}
}
}
},
mounted () {
this.renderLineChart()
},
methods: {
/*
** Get chart options
*/
getChartOptions () {
return this.options
},
/*
** Render a line chart
*/
renderLineChart () {
const options = this.getChartOptions()
// this.chartdata is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.localData, options)
}
},
computed: {
localData: function() {
return this.chartData
}
},
watch: {
chartData: {
handler: function (val, oldVal) {
const options = this.getChartOptions()
const clone = _.cloneDeep(this.localData)
console.log(this.localData)
this._data._chart.update()
this.renderChart(clone, options)
},
deep: true
}
}
}
When I log console.log(this.localData) inside of my watch method of my plugin, I'm not seeing my labels get updated with the new labels and data that are pushed from :labels="server[Object.keys(server)[0]].history.labels" inside of my webpage where I'm calling my line chart, what am I missing?
My page which called my chart component is:
<div class="col-span-12" v-for="(server, index) in servers" :key="index">
<div class="bg-white p-6 rounded-md">
<h3 class="text-md font-medium text-gray-900">{{ server[Object.keys(server)[0]].agent.agent }}</h3>
</div>
<hr v-if="server[Object.keys(server)[0]].history" />
<div v-if="server[Object.keys(server)[0]].history" class="bg-white p-6 rounded-md">
<h3 class="text-md font-medium text-gray-500 mb-3">Free memory</h3>
<div class="chart chart--generic">
<LineChart
:labels="server[Object.keys(server)[0]].history.labels"
:datasets="[{
fill: false,
borderWidth: 2.5,
pointBackgroundColor: '#fff',
borderColor: '#5046e5',
data: server[Object.keys(server)[0]].history.data,
}]"
/>
</div>
</div>
</div>
解决方案
After updating the array labels, You could try to call your fillData() method.
Hope it works
这篇关于图表 JS 不会使用 update() 方法动态更新新数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
