Я пытаюсь создать 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: не удается прочитать свойство« переход », равное нулю». Но это, похоже, ни на что не влияет, так как изменение размера окна приведет к первоначальному отображению диаграммы. Обновление метода data changetestthing обновляет набор данных (chartData) правильно, но если я не изменю размер окна, он не будет повторно отображаться.
Как я могу заставить диаграмму перерисоваться? Как я могу получить ссылку на компонент TestChart в родительском элементе? this.TestChart не определен. Мне интересно получить ссылку только в том случае, если из ссылки я могу вручную вызвать для нее 'renderChart'. Благодарю.
*** Обновлять
Мне удалось обновить график со следующими изменениями:
Я удалил следующие строки из метода changetestthing:
this.datacollection.datasets = null;
this.datacollection.labels = null;
И изменил оператор присвоения значения datacollection на это:
this.datacollection = Object.assign({}, this.datacollection, { labels: labels, datasets: datasets });
Я не могу с уверенностью сказать, что это лучшая практика. Согласно документации vue.js (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.labels и .datasets значение null, а затем использовать Object.assign, изменения запускаются. Я до сих пор не уверен, почему они не были запущены с помощью миксинов или ручного отслеживания. Любые комментарии приветствуются.
