chartjs + Angular6 不显示图表或任何错误 [英] chartjs + Angular6 is not showing charts or any error

问题描述

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

I m trying to implement chart.js in angular, have written a simple code to display chart on html, but there is not output on the page, also there are no errors. I m not getting where is the issue and why displaying chart is getting failed. slackblitz url for reference

我在组件中尝试的代码:

Code that I m trying in component:

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
          }]
        }
      }
    });

请帮助我了解我失败的地方，谢谢

Please help me to understand where I m getting failed, Thanks

推荐答案

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

Code in component is correct, issue was in html wrapping the <canvas> tag inside <div> has solved the issue as said in comment by @Quan Vo

例子:

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

为什么<canvas>标签应该在<div>标签里面，这个可以参考这篇文章

Why <canvas> tag should be inside <div> tag, for this one can refer this article

简而言之:

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

The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag, with the exception that its contents are rendered with JavaScript. In order to leverage the HTML5 Canvas, we'll need to place the canvas tag somewhere inside the HTML document, access the canvas tag with JavaScript, create a context, and then utilize the HTML5 Canvas API to draw visualizations.

这篇关于chartjs + Angular6 不显示图表或任何错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！