Question

我需要在导航回组件时更新圆环图，但事实上它不是。

renderChart(oplTitle, oplScore, oplScoreDifference) {
 this.options = {
  type: 'doughnut',
  data: {
    labels: ["Opl progress", ""],
    datasets: [{
      borderWidth: 0,
      data: [oplScore, oplScoreDifference],
      backgroundColor: [
        'rgba(250, 203, 27, 0.9)',
        'rgba(255, 255, 255, 1)'
      ],
      borderColor: [
        'rgba(250, 203, 27, 1)',
        'rgba(250, 203, 27, 1)'
      ],
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: oplTitle,
      position: 'bottom'
    },
    tooltips: {
      enabled: false,
      backgroundColor: 'rgba(250, 203, 27, 1)'
    },
    legend: {
      display: false,
      labels: {
        boxWidth: 20
      }
    }
  }
  }
  }

我在页面加载时调用renderChart

 ionViewDidLoad() {
    this.renderChart(this.title, this.score, this.difference);
 }

在Html中

<chart [options]="options"></chart>

正如图表呈现的那一刻，但是当导航离开并且值得到更新时，它在返回页面时不会刷新。我怎样才能'刷新'

Answer 1

问题是因为，就像您在文档中看到的那样，ionViewDidLoad事件......

页面加载后运行。此事件每页仅发生一次被创造。 如果页面已离开但已缓存，则此事件将为在随后的观看中不再发射。 ionViewDidLoad事件是放置页面设置代码的好地方。

由于页面正在被缓存，因此事件只执行一次（创建页面时）。请使用ionViewDidEnter页面事件，因为它......

页面完全进入后运行，现在是活动页面。 ：此无论是首次加载还是缓存页面，都会触发事件。

您可以找到更多信息here。

刷新图表Ionic 2 Chart.js

1 个答案: