диаграмма в повторно вызывать штурманской вю

Question

диаграмма в повторно вызывать штурманской вю

1

Как мне обратиться к диаграмме в экземпляре виртуальной таблицы и уничтожить ее? Я пробовал:

var chartVue = new Vue({
  el: '#chart',
  extends: VueChartJs.Line,
  data: {
    chartData: {...},
    options: {...}
  },
  mounted() {
    this.renderMyChart()
  },
  methods: { 
    renderMyChart: function() {
      this.renderChart(
        this.chartData,
        this.options
        );
    }
  },
  watch: {
    chartData: function() {
      this._chart.destroy();
      this.renderMyChart();
    }
  }
});

Но он жалуется

TypeError: Невозможно прочитать свойство "destroy" undefined

Таким образом, кажется, что this._chart не является правильным способом ссылаться на текущий график, кто-нибудь знает, как правильно это сделать? Идея исходит из этого ответа.

Psidom 25 окт. 2017, в 21:38

Источник

0

this._chart - правильная ссылка, поэтому я не уверен, почему она будет undefined в этот момент. Но вы также можете просто использовать миксин reactiveData , который делает именно то, что вы пытаетесь сделать: vue-chartjs.org/#/home?id=reactive-data
thanksd 25 окт. 2017, в 19:58
0

Привет @thanksd, спасибо за ответ. Я смотрел на mixin но не уверен, как использовать его непосредственно в VUE. В примере показано, как использовать его в компоненте vue. У вас как, как я могу использовать реактивныйПроп здесь?
Psidom 25 окт. 2017, в 20:04
1

Просто добавьте mixins: [ VueChartJs.mixins.reactiveData ], И заметьте , что это не нужно быть reactiveData и не reactiveProp , так как вы определили chartData в вашем объекте данных , а не как принятый в пропеллер. Пример: jsfiddle.net/fuj4yqke
thanksd 25 окт. 2017, в 20:08
0

@thanksd Отлично. Я думаю, что это трюк, которого мне не хватает. Я все время пробовал reactiveProp . Сейчас работает отлично. Если вы не против опубликовать ответ, я проголосую и приму его. Документация не очень ясно об этом.
Psidom 25 окт. 2017, в 20:13

Показать ещё 2 комментария

Теги:

javascript

vue.js

vue-chartjs

2 ответа

0

Кажется, что this._chart был перемещен в this._data._chart, так, например, чтобы сделать варианты реактивными, добавьте наблюдателя следующим образом:

watch: {
    options: function() {
        this._data._chart.destroy();
        this.renderChart(this.chartData, this.options);
    }
}

Psidom 31 окт. 2017, в 16:24

Ещё вопросы

this._chart - правильная ссылка, поэтому я не уверен, почему она будет undefined в этот момент. Но вы также можете просто использовать миксин reactiveData , который делает именно то, что вы пытаетесь сделать: vue-chartjs.org/#/home?id=reactive-data
Привет @thanksd, спасибо за ответ. Я смотрел на mixin но не уверен, как использовать его непосредственно в VUE. В примере показано, как использовать его в компоненте vue. У вас как, как я могу использовать реактивныйПроп здесь?
Просто добавьте mixins: [ VueChartJs.mixins.reactiveData ], И заметьте , что это не нужно быть reactiveData и не reactiveProp , так как вы определили chartData в вашем объекте данных , а не как принятый в пропеллер. Пример: jsfiddle.net/fuj4yqke
@thanksd Отлично. Я думаю, что это трюк, которого мне не хватает. Я все время пробовал reactiveProp . Сейчас работает отлично. Если вы не против опубликовать ответ, я проголосую и приму его. Документация не очень ясно об этом.

thanksd · Accepted Answer · 2017-10-25T18-13-00.000Z

Объект Chart доступный через this._chart, не установлен до тех пор, пока не renderChart метод renderChart. Скорее всего, это то, что ваши данные chartData каким-то образом обновляются до того, как был renderChart метод renderChart. Таким образом, наблюдатель для chartData ссылается на this._chart прежде чем он будет определен.

Тем не менее, vue-chartjs имеет запеченный способ повторного рендеринга диаграммы, когда изменяются зависимые данные: reactiveData сигналы и reactiveProp миксы. Добавляя один из этих миксинов, изменения в chartData (data-property или prop, соответственно) будут повторно отображать диаграмму для отражения обновленных данных.

Вы должны использовать reactiveData подмешать вместо:

var chartVue = new Vue({
  el: '#chart',
  extends: VueChartJs.Line,
  mixins: [ VueChartJS.mixins.reactiveData ],
  data() {
    return {
      chartData: {...}, 
      options: {...}
    }
  },
  mounted() {
    this.renderChart(this.chartData, this.options);
  },
});