在弹出窗口

时间:2018-06-14 06:41:37

标签: typescript angular5 chart.js2

我使用Angular 5和Chart.js编写了一个代码,用户在单击特定设备信息时将在弹出窗口中看到特定的图形。

我面临的问题是图表没有显示在弹出窗口中。我得到的错误是: "无法创建图表:无法从给定项目获取上下文"

我的html文件代码片段:

<div class="overlay" *ngIf="showPopup">
  <div class="overlay-content">
    <div class="close" (click)="hide()"></div>
    <div class="title">
      <span>MRET ID {{selectedAsset}}</span>
    </div>
    <!-- <button type="button" class="btn btn-secondary (click)="showChart()">Show Chart</button> -->
    <div class="graph">
      <canvas #mycanvas id="canvas"></canvas>
    </div>
  </div>
</div>

,角度为:

showChart() {
this.chart = new Chart('canvas', {
  type: 'bar',
  data: {
    labels: this.usageDays,
    datasets: [
      {
        label: "Hours",
        data: this.usageHours,
        backgroundColor: 'rgb(63, 162, 219)'
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: true,
          labelString: 'Days'
        }
      }],
      yAxes: [{
        gridLines: {
          display: false
        },
        scaleLabel: {
          display: true,
          labelString: 'Hours'
        }
      }],
    }
  }
 })
}

解决方案:

  • document.getElementById(&#39; canvas&#39;):它在console.log上为null
  • @viewChild(&#39; canvas&#39;)和ngAfterViewInit:它在console.log上提供了undefined

对我有用的是使用弹出屏幕上的按钮(点击)=&#34; showChart()&#34;功能。但我不想要这个按钮

请帮助。

0 个答案:

没有答案