图表js图形未显示在画布上

bxjv4tth  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(412)

这是我从chart.js网站的教程中获得的代码https://www.chartjs.org/docs/master/getting-started/usage.html 我也看了这个视频https://www.youtube.com/watch?v=zcyiuccto20 没错,所以我不知道我哪里出错了。做了很多研究,但没有找到我的问题。提前感谢您的帮助。

  1. import { Component, OnInit } from '@angular/core';
  2. import { Chart } from '../../../node_modules/chart.js'
  3. @Component({
  4. selector: 'app-recent-graph',
  5. templateUrl: './recent-graph.component.html',
  6. styleUrls: ['./recent-graph.component.css']
  7. })
  8. export class RecentGraphComponent implements OnInit {
  9. constructor() { }
  10. ngOnInit() {
  11. var myChart = new Chart("myChart", {
  12. type: 'bar',
  13. data: {
  14. labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  15. datasets: [{
  16. label: '# of Votes',
  17. data: [12, 19, 3, 5, 2, 3],
  18. backgroundColor: [
  19. 'rgba(255, 99, 132, 0.2)',
  20. 'rgba(54, 162, 235, 0.2)',
  21. 'rgba(255, 206, 86, 0.2)',
  22. 'rgba(75, 192, 192, 0.2)',
  23. 'rgba(153, 102, 255, 0.2)',
  24. 'rgba(255, 159, 64, 0.2)'
  25. ],
  26. borderColor: [
  27. 'rgba(255, 99, 132, 1)',
  28. 'rgba(54, 162, 235, 1)',
  29. 'rgba(255, 206, 86, 1)',
  30. 'rgba(75, 192, 192, 1)',
  31. 'rgba(153, 102, 255, 1)',
  32. 'rgba(255, 159, 64, 1)'
  33. ],
  34. borderWidth: 1
  35. }]
  36. },
  37. options: {
  38. scales: {
  39. y: {
  40. beginAtZero: true
  41. }
  42. }
  43. }
  44. });
  45. }
  46. }
  47. '''
  48. HTML:
  49. '''
  50. <div id="divChart">
  51. <canvas id="myChart"></canvas>
  52. </div>
  53. '''
x33g5p2x

x33g5p2x1#

您的图表导入错误,如果使用括号,您必须导入所有要使用的组件并注册它们,或者如果您这样导入,您可以忽略树状结构并让图表处理 import Chart from 'chart.js/auto' 有关树形图导入和注册的信息,请参阅文档

相关问题