vue.js Диаграмма vue-chartjs не обновляется после замены, обновления данных и т. д.
Я пытаюсь сделать vue с помощью vue-chartjs. Я следовал за всей связанной документацией в отношении повторного рендеринга диаграммы при обновлении реквизита chartData. Моя диаграмма будет обновляться только после изменения размера окна браузера.
мой файл parenttestchart.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)
}
}
}
мой файл TestChart.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>
Так что это работает с точки зрения выбора и изменения набора данных в родительском vue. Если я не изменяю размер окна, хотя диаграмма не перерисовывается. При начальной загрузке parenttestchart.vue я получаю следующую ошибку: 'Uncaught TypeError: Невозможно прочитать свойство'transition' of null' . Но, похоже, это ничего не меняет, так как изменение размера окна будет отображать начальное отображение графика. Обновление метода changetestthing данных корректно обновляет коллекцию данных (chartData), но если я не изменю размер окна, оно не будет повторно отображаться.
Как я могу заставить диаграмму повторно сделать? Как я могу получить ссылку на компонент TestChart в родительском?? this.TestChart не определено. Мне только любопытно получить ссылку в случае, если я могу вручную вызвать 'renderChart'. Благодарю.
*** Обновить
Мне удалось получить график для обновления со следующими изменениями:
Я удалил следующие строки из метода changetestthing:
this.datacollection.datasets = null;
this.datacollection.labels = null;
И изменил оператор присваивания значения коллекции данных следующим образом:
this.datacollection = Object.assign({}, this.datacollection, { labels: labels, datasets: datasets });
Не могу точно сказать, что это лучшая практика. Согласно документации vue.js ( https://vuejs.org/v2/guide/reactivity.html)
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.labels и.datasets в значение null, а затем используя Object.assign, изменения инициируются. Я все еще не уверен, почему они не были вызваны миксином или ручными часами. Любые комментарии приветствуются.
2 ответа
Билли Джин, последняя нота, сработала для меня. PIECHART.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})
}
})
Это в моем файле view.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 и сгенерировать их в моем view.vue следующим образом:
<pie-chart-city :chartData="CityDatac" :width="300" :height="250"></pie-chart-city>
Надеюсь, что это поможет любому в VUE.js -> Vue-chartjs.js
Один из способов - добавить наблюдателя на график,
props: ['chartData', 'options'],
mounted () {
this.renderChart(this.chartData, this.options)
},
watch: {
'chartData' (to, from) {
this.renderChart(this.chartData, this.options)
}
},
Смотрите пример CodePen
Редактировать - наблюдатель не работает
Разница между вашим кодом и рабочим CodePen заключается в том, что CodePen изменяет переменную, переданную в диаграмму, поэтому его наблюдатель реагирует.
Ваш код мутирует .datasets свойство переменной - с этой ссылкой есть известная проблема: миксины, похоже, не запускают обновление диаграммы # 44.
Попробуйте заменить
this.datacollection.datasets = [];
this.datacollection.labels = [];
с этим (оба места)
this.datacollection = { datasets: [], labels: [] };
Код, опубликованный Alexis Poo, указывает мне правильное направление.
В моем случае мне нужно изменить watch немного возразить.
При попытке уничтожить график, позвонив this._chart.destroy() при изменении параметра я получил сообщение об ошибке: cannot read property 'destroy' of undefined.
Чтобы решить проблему, мне нужно сделать this.$data._chart.destroy() вместо.
Надеюсь, это поможет.