我使用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'
}
}],
}
}
})
}
解决方案:
对我有用的是使用弹出屏幕上的按钮(点击)=&#34; showChart()&#34;功能。但我不想要这个按钮
请帮助。