angularjs - 图表 js 图形未显示在画布上
问题描述
这是我从 chart.js 网站https://www.chartjs.org/docs/master/getting-started/usage.html的教程中获得的代码 我也关注了这个视频https://www.youtube.com /watch?v=ZCYiUCcTo20完全正确,所以不确定我哪里出错了。研究了很多,但找不到我的具体问题。提前感谢您的帮助。
import { Component, OnInit } from '@angular/core';
import { Chart } from '../../../node_modules/chart.js'
@Component({
selector: 'app-recent-graph',
templateUrl: './recent-graph.component.html',
styleUrls: ['./recent-graph.component.css']
})
export class RecentGraphComponent implements OnInit {
constructor() { }
ngOnInit() {
var myChart = new Chart("myChart", {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}
}
'''
HTML:
'''
<div id="divChart">
<canvas id="myChart"></canvas>
</div>
'''
解决方案
您的图表导入是错误的,如果您使用这样的括号,则必须导入所有要使用的组件并注册它们,或者您可以忽略 treeshaking 并让图表处理它,如果您像这样导入它import Chart from 'chart.js/auto'
有关 treeshaking 导入和注册,请参阅文档
推荐阅读
- case - VHDL:使用不关心是否正确?
- javascript - next.js 通过 babel 导入 svg 不缩放
- python - 基于用户选择的标签组合框状态
- firebase - 云 Firestore 中的时间字段 serverTimestamp() 在第一个快照上返回 null
- django - 如何制作`
`显示:换行过滤器后内联?
- vue.js - 为什么内容里面的v-card有点卡出来了?
- python - 使用 Google Cloud SDK 在本地运行的 Google Speech-to-Text JupyterLab 笔记本脚本
- html - 直接发送邮件,无需打开邮件应用程序或邮件网站
- flutter - 登录用户不去主页(颤振)
- c# - 如何使用 Linq 从数据库中的 2 列中获取最近的日期