angular - chartjs + Angular6 不显示图表或任何错误

Question

我正在尝试以 Angular 实现 chart.js，编写了一个简单的代码来在 html 上显示图表，但页面上没有输出，也没有错误。我不知道问题出在哪里以及为什么显示图表失败。 slackblitz引用网址

我在组件中尝试的代码:

this.chart1 = new Chart('canvas', {
      type: 'doughnut',
      data: {
        labels: ['solid', 'liquid', 'unknown'],
        datasets: [
          {
            label: 'test',
            data: [
              100, 200, 300
            ],
            backgroundColor: ['#0074D9', '#2ECC40', '#FF4136']
          }
        ]
      },
      options: {
        title: {
          display: false,
          text: 'Color test'
        },
        legend: {
          position: 'left',
          display: true,
          fullWidth: true,
          labels: {
            fontSize: 11
          }
        },
        scales: {
          xAxes: [{
            display: true
          }],
          yAxes: [{
            display: true
          }]
        }
      }
    });

请帮助我了解我在哪里失败了，谢谢

Answer 1

组件中的代码是正确的，问题是在 html 中包装 <canvas>标签内 <div>已经解决了@Quan Vo 在评论中所说的问题

例子:

<div><canvas id="canvas"></canvas></div>

为什么 <canvas>标签应在 <div> 内标签，这个可以引用this article

简而言之:

HTML5 Canvas 元素是一个类似于 <div> 的 HTML 标签。 , <a> , 或 <table>标签，除了它的内容是用 JavaScript 呈现的。为了利用 HTML5 Canvas，我们需要将 canvas 标签放在 HTML 文档内的某个位置，使用 JavaScript 访问 canvas 标签，创建上下文，然后利用 HTML5 Canvas API 绘制可视化效果。