首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

作者：安 | 来源：互联网 | 2022-11-30 18:14
如何解决《chartjs+Angular6没有显示图表或任何错误》经验，为你挑选了1个好方法。

我试图以角度的方式实现chart.js，编写了一个简单的代码以在html上显示图表，但是页面上没有输出，也没有错误。我不明白问题出在哪里，为什么显示图表失败。 slackblitz URL供参考

我在组件中尝试的代码：

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

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



1> Vino..：

组件中的代码正确无误，问题出在html中，将标签包裹

在其中，正如@Quan Vo的评论中所述，问题已解决

例：

为什么标记应位于

标记内，为此可以参考本文

简而言之：

HTML5的Canvas元素是一个HTML标签类似

，或标签，用其内容是用Javascript渲染的异常。为了利用HTML5 Canvas，我们需要将canvas标签放置在HTML文档内的某个位置，使用Javascript访问canvas标签，创建上下文，然后利用HTML5 Canvas API绘制可视化效果。

这绝对是正确的答案！谢谢！
推荐阅读
author-avatar
安
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有