刷新图表Ionic 2 Chart.js

阿里安纽尔

导航回组件时,我需要更新一个甜甜圈图,但目前还没有。

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>

图表目前处于渲染状态,但是当导航并更新值时,返回页面时不会刷新。我如何“刷新”

塞巴费雷拉斯

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

页面加载后运行。每创建一个页面此事件仅发生一次。如果页面离开但已被缓存,则此事件将不会在后续查看中再次触发ionViewDidLoad事件是放置页面设置代码的好地方。

并且由于页面被缓存,因此事件仅被执行一次(创建页面时)。改用ionViewDidEnterpage事件,因为它...

当页面已完全进入并且现在是活动页面时运行。无论是第一次加载还是缓存的页面,都会触发此事件

您可以在此处找到更多信息

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Chart.js v2图表未显示在角度2内(但Chart.js v1完美运行)

来自分类Dev

使用更新按钮(chart.js)将2个图表合并为1个图表

来自分类Dev

react-chartjs-2 chart.js:如何使Dougnut图表的strokewidth变薄?

来自分类Dev

Chart.js Ionic 2 Angular2:条形图的背景色未更改

来自分类Dev

Ajax刷新后的Chart.js在同一个容器中有两个图表(新旧)

来自分类Dev

Chart.js:未显示图表

来自分类Dev

动态更新Chart.js图表的值

来自分类Dev

通过Chart.js创建多个图表

来自分类Dev

角度:chart.js图表未显示

来自分类Dev

如何使用chart.js显示图表?

来自分类Dev

Chart.js图表未显示

来自分类Dev

使用chart.js动态添加图表

来自分类Dev

不断增长的图表价值 - chart.js

来自分类Dev

在 vue 中从 chart.js 更新图表

来自分类Dev

图表的最小值 (Chart.js)

来自分类Dev

generateLegend()Chart.JS V2

来自分类Dev

图表Js函数(Chart.js)陷入循环

来自分类Dev

显示多个图表angular.js chart.js

来自分类Dev

Chart.js版本2.2.1不会显示图表

来自分类Dev

Chart.js-创建自定义图表类型

来自分类Dev

Chart.js响应式选项-图表未填充容器

来自分类Dev

使用Chart.js检测图表部分上的悬停事件

来自分类Dev

如何将chart.js图表导出到Excel?

来自分类Dev

使用chart.js创建动态图表

来自分类Dev

Chart.js-在一页上创建多个图表

来自分类Dev

Chart.js-将全局图表配置放在何处?

来自分类Dev

Chart.js-如何在图表中间添加文本?

来自分类Dev

图表区域背景色chart.js

来自分类Dev

无法创建使用chart.js之独立图表