Question

我正在尝试以角度实现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>，<a>或<table>标签的HTML标签，不同之处在于其内容是用JavaScript呈现的。为了利用HTML5 Canvas，我们需要将canvas标签放置在HTML文档内的某个位置，使用JavaScript访问canvas标签，创建上下文，然后利用HTML5 Canvas API绘制可视化效果。

chartjs + Angular6没有显示图表或任何错误

1 个答案: