Question

我应如何参考vue图表实例中的图表并销毁它？我试过了：

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：无法读取属性＆＃39; destroy＆＃39;未定义的

所以似乎this._chart不是引用当前图表的正确方法，任何人都知道这样做的正确方法是什么？这个想法来自this stack overflow answer。

Answer 1

在调用Chart方法之后，才会设置通过this._chart可访问的renderChart对象。最有可能发生的事情是，在调用chartData方法之前，renderChart以某种方式更新。因此，chartData的观察者在定义之前引用this._chart。

但是，当vue-chartjs依赖数据发生变化时，chartData有一种重新渲染图表的方式：reactiveData and reactiveProp mixins。通过添加这些mixin中的任何一个，对reactiveData（分别为data-property或prop）的更改将重新呈现图表以反映更新的数据。

您应该使用var chartVue = new Vue({ el: '#chart', extends: VueChartJs.Line, mixins: [ VueChartJS.mixins.reactiveData ], data() { return { chartData: {...}, options: {...} } }, mounted() { this.renderChart(this.chartData, this.options); }, }); mixin代替：

FingerprintManagerCompat fingerprintManagerCompat = FingerprintManagerCompat.from(getApplicationContext());
if (!fingerprintManagerCompat.isHardwareDetected()) {
    // O dispositivo não suporta a autenticação de impressão digital
    BtnActionFingerprint.setEnabled(false);
    BtnActionFingerprint.setText(R.string.button_title_fingerprint_not_supported);
} else
    if (!fingerprintManagerCompat.hasEnrolledFingerprints()) {
        // O usuário não registrou nenhuma impressão digital para autenticar com
        BtnActionFingerprint.setEnabled(false);
        BtnActionFingerprint.setText(R.string.button_title_fingerprint_supported_but_unavaliable);
    } else {
        // Tudo está pronto para a autenticação de impressão digital 
        BtnActionFingerprint.setEnabled(true);
        BtnActionFingerprint.setText(R.string.button_title_fingerprint_supported);
    }

Answer 2

似乎this._chart已移至this._data._chart，因此例如为了使选项具有反应性，请按以下方式添加观察者：

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

在vue-chart中重新渲染图表

2 个答案: