Ву.js vue-диаграмма chartjs не обновляется, когда chartData заменяется, обновляется и т. д
Я пытаюсь сделать vue с vue-chartjs. Я следил за всей соответствующей документацией в отношении повторного рендеринга диаграммы при обновлении опоры chartData. Моя диаграмма будет обновляться только после изменения размера окна браузера.
моя родительская карта.файл Vue :
<template>
<div>
<h1>Chart datacollection update test</h1>
<p>This component demonstrates fetching data from the server.</p>
<p v-if="!datacollection"><em>Loading...</em></p>
<b-form-select
v-model="testthingSelect.selected"
text="Select testthing"
variant="primary"
:options="testthingSelect.options"
:on-change="changetestthing"
class="m-md-2">
</b-form-select>
<test-chart v-cloak :chart-data="datacollection" :chart-option="options"></test-chart>
</div>
</template>
<script>
import TestChart from './TestChart'
export default {
components: {
TestChart
},
data() {
return {
yAxisValues: [],
datacollection: {},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
},
gridLines: {
display: true
}
}],
xAxes: [{
type: "date",
display:true,
gridLines: {
display: false
}
}]
},
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
},
testthingSelect: {
selected: "EIA/COAL",
disabled: false,
readonly: false,
visible: true,
color: "",
options: [
{
value: null,
text: 'Select a testthing'
},
{
value: "item1",
text: "item1"
},
{
value: "item1",
text: "item1"
},
{
value: "item1",
text: "item1"
}
]
}
}
},
methods: {
changetestthing: async function () {
try {
let response = await this.$http.get(url for my data);
this.datacollection.datasets = [];
this.datacollection.labels = [];
...required data transformations
this.$set(this.datacollection, "labels", labels);
this.$set(this.datacollection, "datasets", datasets);
// this.datacollection.labels = labels;
// this.datacollection.datasets = datasets;
} catch (error) {
console.log(error)
}
}
},
watch: {
'commoditySelect.selected': function () { this.changeCommodity(); }
},
async created() {
// ES2017 async/await syntax via babel-plugin-transform-async-to-generator
// TypeScript can also transpile async/await down to ES5
try {
let response = await this.$http.get(url for my data);
this.datacollection.datasets = [];
this.datacollection.labels = [];
...required data transformations
this.$set(this.datacollection, "labels", labels);
this.$set(this.datacollection, "datasets", datasets);
// this.datacollection.labels = labels;
// this.datacollection.datasets = datasets;
} catch (error) {
console.log(error)
}
} catch (error) {
console.log(error)
}
}
}
моя тестовая схема.файл Vue
<script>
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
//Exporting this so it can be used in other components
export default {
extends: Line,
mixins: [reactiveProp],
props: ['chartData', 'options'],
mounted() {
this.renderChart(this.chartData, this.options)
}
}
</script>
Таким образом, это работает с точки зрения выбора и изменения datacollection в Родительском vue. Если я не изменю размер окна, хотя диаграмма не будет повторно отображаться. Когда parenttestchart.vue изначально загружает я получаю следующую ошибку: "Uncaught TypeError: не удается прочитать свойство "переход" из null". Но это, похоже, не влияет ни на что, так как изменение размера окна приведет к первоначальному отображению графика. Обновление метода Data changetestthing обновляет datacollection (chartData) правильно, но если я не изменю размер окна, он не будет повторно отображаться.
Как я могу заставить диаграмму повторно визуализировать? Как я могу получить ссылку на компонент TestChart в родительском элементе?? этот.Тестовая диаграмма не определена. Мне только интересно получить ссылку на случай, если из ссылки я могу вручную вызвать "renderChart" на нем. спасибо.
*** Обновление
Мне удалось обновить диаграмму со следующими изменениями:
Я удалил следующие строки из метода changetestthing :
this.datacollection.datasets = null;
this.datacollection.labels = null;
И изменил сбора данных оператор присваивания значения этому:
this.datacollection = Object.assign({}, this.datacollection, { labels: labels, datasets: datasets });
Я не могу сказать наверняка, что это лучшая практика. Согласно vue.Яш документации (https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)
new properties added to the object will not trigger changes. In such
cases, create a fresh object with properties from both the original
object and the mixin object
Поэтому я считаю, что не устанавливая datacollection.наклейка и. свойства набора данных равны нулю, а затем с помощью объекта.назначьте изменения срабатывают. Я все еще не уверен, почему они не были вызваны с помощью миксинов или ручных часов. Любые комментарии приветствуются.
Ответы - Ву.js vue-диаграмма chartjs не обновляется, когда chartData заменяется, обновляется и т. д / vue.js vue-chartjs chart not updating when chartData replaced, updated etc

07.11.2017 05:59:57
Один из способов, который работает, чтобы добавить наблюдателя к диаграмме,
props: ['chartData', 'options'],
mounted () {
this.renderChart(this.chartData, this.options)
},
watch: {
'chartData' (to, from) {
this.renderChart(this.chartData, this.options)
}
},
См. пример CodePen
Редактировать-наблюдатель не работает
Разница между вашим кодом и рабочим CodePen заключается в том, что CodePen мутирует переменную, переданную в диаграмму, поэтому это наблюдатель реагирует.
Ваш код мутирует .datasets
свойство datasets переменной-есть известная проблема с этим ref: Mixins, похоже, не запускает обновление диаграммы #44 .
Попробуйте заменить
this.datacollection.datasets = [];
this.datacollection.labels = [];
с этим (оба места)
this.datacollection = { datasets: [], labels: [] };





22.02.2018 12:08:47
Билли Джин Конечная нота работал для меня разным.JS:
import {
Pie,
mixins
} from 'vue-chartjs'
const {
reactiveProp
} = mixins
export default Pie.extend({
mixins: [reactiveProp],
props: ['options'],
watch: {
'options': {
handler(newOption, oldOption) {
this._chart.destroy()
this.renderChart(this.chartData, this.options)
},
deep: true
}
},
mounted() {
this.renderChart(this.chartData, {responsive: true, maintainAspectRadio:
false})
}
})
Это на мой взгляд.файл Vue :
let datasets = []
let colorlist = [ '#4e5fa4', '#5e5fa4', '#6e5fa4',
'#7e5fa4', '#8e5fa4', '#a08be4', '#b08bd4']
datasets.push({
label: this.data_by_city_label,
data: this.data_by_city_data,
fill: false,
backgroundColor: colorlist,
pointBorderWidth: 1,
borderWidth: 1,
pointRadius: 0
})
this.CityDatac = Object.assign({}, this.datasets, {labels: this.data_by_city_label, datasets: datasets})
С этим я могу отправить свои данные в PIECHART js и сгенерировать в моем представлении.вю как же так:
<pie-chart-city :chartData="CityDatac" :width="300" :height="250"></pie-chart-city>
Надеюсь, это поможет кому-нибудь в VUE.Яш -> вю-chartjs.JS

18.09.2019 07:08:15
Код, отправленный Алексисом Пу, указывает мне в правильном направлении.
В моем случае мне нужно watch
при изменении параметра я получил сообщение об ошибке: this._chart.destroy()
.
Чтобы исправить проблему, я должен сделать cannot read property 'destroy' of undefined
.
Надеюсь, это поможет.