无法绑定到“数据”，因为它不是“画布”的已知属性

2024-01-19

我正在尝试使用 ng2-charts 并遇到错误，提示我使用的元素不正确。
我在这个网站上尝试了一些答案，但没有成功：

NG2-Charts 无法绑定到“数据集”，因为它不是“画布”的已知属性 https://stackoverflow.com/questions/40016333/ng2-charts-cant-bind-to-datasets-since-it-isnt-a-known-property-of-canvas

ng2-charts - 无法绑定到“数据集”，因为它不是“基本图表”的已知属性 https://stackoverflow.com/questions/40301229/ng2-charts-cant-bind-to-datasets-since-it-isnt-a-known-property-of-base-c

这是我的代码：

import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    templateUrl: "four-item-horse-shoe-graph.component.html",
    styleUrls: ["four-item-horse-shoe-graph.component.css"],
    selector: "four-item-horse-shoe"
})

export class FourItemHorseShoeGraphComponent {
    // Doughnut
    public doughnutChartLabels: string[] = ["Download Sales", "In-Store 
        Sales", "Mail-Order Sales"];
    public doughnutChartData: number[] = [350, 450, 100];
    public doughnutChartType: string = "doughnut";

    // events
    public chartClicked(e: any): void {
        console.log(e);
    }

    public chartHovered(e: any): void {
        console.log(e);
    }
}

和 HTML：

<div style="display: block">
<canvas baseChart
        [data]="doughnutChartData"
        [labels]="doughnutChartLabels"
        [chartType]="doughnutChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)">
</canvas>

systemjs.config.js：

            'chart': 'npm:chart.js/src/chart.js',
        "ng2-charts": "node_modules/ng2-charts"
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: './main.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        },
        "ng2-charts": { main: "ng2-charts.js", defaultExtension: "js" }

应用程序模块.ts

import { ChartsModule } from "ng2-charts/ng2-charts";

declare let jQuery: Object;

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,
    CoreFeatureModule,
    LayoutModule,
    ChartsModule

ERROR:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<div style="display: block">
    <canvas baseChart
            [ERROR ->][data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [chartType]="doughnutCh"): FourItemHorseShoeGraphComponent@2:9
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
            [data]="doughnutChartData"
            [ERROR ->][labels]="doughnutChartLabels"
            [chartType]="doughnutChartType"
            (chartHover)="char"): FourItemHorseShoeGraphComponent@3:9
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [ERROR ->][chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="): FourItemHorseShoeGraphComponent@4:9 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {_nativeError: Error: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<d…} Error: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<div style="display: block">
    <canvas baseChart
            [ERROR ->][data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [chartType]="doughnutCh"): FourItemHorseShoeGraphComponent@2:9
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
            [data]="doughnutChartData"
            [ERROR ->][labels]="doughnutChartLabels"
            [chartType]="doughnutChartType"
            (chartHover)="char"): FourItemHorseShoeGraphComponent@3:9
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [ERROR ->][chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="): FourItemHorseShoeGraphComponent@4:9
    at SyntaxError.BaseError [as constructor] (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1595:29) [<root>]
    at new SyntaxError (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1793:18) [<root>]
    at TemplateParser.parse (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:11222:21) [<root>]
    at JitCompiler._compileTemplate (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27474:70) [<root>]
    at eval (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:64) [<root>]
    at Set.forEach (native) [<root>]
    at JitCompiler._compileComponents (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:21) [<root>]
    at createResult (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27240:21) [<root>]
    at Zone.run (http://localhost:44444/node_modules/zone.js/dist/zone.js:113:43) [<root> => <root>]
    at http://localhost:44444/node_modules/zone.js/dist/zone.js:520:57 [<root>]
    at Zone.runTask (http://localhost:44444/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:44444/node_modules/zone.js/dist/zone.js:418:35) [<root>]
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:44444/node_modules/zone.js/dist/zone.js:349:25) [<root>]
consoleError @ zone.js:405
_loop_1 @ zone.js:434
drainMicroTaskQueue @ zone.js:438
ZoneTask.invoke @ zone.js:349
zone.js:407 Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<div style="display: block">
    <canvas baseChart
            [ERROR ->][data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [chartType]="doughnutCh"): FourItemHorseShoeGraphComponent@2:9
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
            [data]="doughnutChartData"
            [ERROR ->][labels]="doughnutChartLabels"
            [chartType]="doughnutChartType"
            (chartHover)="char"): FourItemHorseShoeGraphComponent@3:9
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [ERROR ->][chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="): FourItemHorseShoeGraphComponent@4:9
Error: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<div style="display: block">
    <canvas baseChart
            [ERROR ->][data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [chartType]="doughnutCh"): FourItemHorseShoeGraphComponent@2:9
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
            [data]="doughnutChartData"
            [ERROR ->][labels]="doughnutChartLabels"
            [chartType]="doughnutChartType"
            (chartHover)="char"): FourItemHorseShoeGraphComponent@3:9
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [ERROR ->][chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="): FourItemHorseShoeGraphComponent@4:9
    at SyntaxError.BaseError [as constructor] (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1595:29) [<root>]
    at new SyntaxError (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1793:18) [<root>]
    at TemplateParser.parse (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:11222:21) [<root>]
    at JitCompiler._compileTemplate (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27474:70) [<root>]
    at eval (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:64) [<root>]
    at Set.forEach (native) [<root>]
    at JitCompiler._compileComponents (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:21) [<root>]
    at createResult (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27240:21) [<root>]
    at Zone.run (http://localhost:44444/node_modules/zone.js/dist/zone.js:113:43) [<root> => <root>]
    at http://localhost:44444/node_modules/zone.js/dist/zone.js:520:57 [<root>]
    at Zone.runTask (http://localhost:44444/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:44444/node_modules/zone.js/dist/zone.js:418:35) [<root>]
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:44444/node_modules/zone.js/dist/zone.js:349:25) [<root>]
    at SyntaxError.BaseError [as constructor] (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1595:29) [<root>]
    at new SyntaxError (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1793:18) [<root>]
    at TemplateParser.parse (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:11222:21) [<root>]
    at JitCompiler._compileTemplate (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27474:70) [<root>]
    at eval (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:64) [<root>]
    at Set.forEach (native) [<root>]
    at JitCompiler._compileComponents (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:21) [<root>]
    at createResult (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27240:21) [<root>]
    at Zone.run (http://localhost:44444/node_modules/zone.js/dist/zone.js:113:43) [<root> => <root>]
    at http://localhost:44444/node_modules/zone.js/dist/zone.js:520:57 [<root>]
    at Zone.runTask (http://localhost:44444/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:44444/node_modules/zone.js/dist/zone.js:418:35) [<root>]
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:44444/node_modules/zone.js/dist/zone.js:349:25) [<root>]
    at resolvePromise (http://localhost:44444/node_modules/zone.js/dist/zone.js:486:31) [<root>]
    at resolvePromise (http://localhost:44444/node_modules/zone.js/dist/zone.js:471:17) [<root>]
    at http://localhost:44444/node_modules/zone.js/dist/zone.js:520:17 [<root>]
    at Zone.runTask (http://localhost:44444/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:44444/node_modules/zone.js/dist/zone.js:418:35) [<root>]
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:44444/node_modules/zone.js/dist/zone.js:349:25) [<root>]
consoleError @ zone.js:407
_loop_1 @ zone.js:434
drainMicroTaskQueue @ zone.js:438
ZoneTask.invoke @ zone.js:349

我需要将 ChartModule 导入到我想要使用图表的组件的 module.ts 文件中。我最初只将其导入到 app.module.ts 中。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

angular

chartjs

无法绑定到“数据”，因为它不是“画布”的已知属性的相关文章

使用角度测试 fakeAsync 和 jest it.each

使用 Angular 8 angular builders jest 8 0 2 jest 24 8 并给出以下测试通过 import tick fakeAsync from angular core testing it test 100
检测 IMG 元素何时在 Angular 2+ 中加载

我在用Angular 2我需要检测图像是否已加载到图像标签中有这样的活动吗像这样的东西 img img
在 Angular2 (TS) 中导入模块的选项

我知道有一些进展或至少有计划 5093 https github com Microsoft TypeScript issues 5039 5728 https github com Microsoft TypeScript pull 57
Firestore从集合中获取文档ID

我正在尝试使用 id 检索我的文档但无法弄清楚目前我像这样检索我的文档 const racesCollection AngularFirestoreCollection
asp.net 核心、角度 2、PrimeNG

I use aspnetcore spa 模板 https www npmjs com package generator aspnetcore spa作为创建管理面板的起点接下来我添加PrimeNG http www primeface
如何在控制台中访问 Angular2 组件特定数据？

有没有办法在控制台中访问 Angular2 特定组件的特定数据以进行调试就像 Angular1 能够在控制台中访问其组件值一样更新4 0 0 StackBlitz 示例 https stackblitz com edit angular
Angular2：类型错误：无法读取未定义的属性“Symbol（Symbol.iterator）”

我是可观察对象的新手正在尝试 Christoph Burgdorf 的基本自动完成变体Angular2 博客中的可观察量 http blog thoughtram io angular 2016 01 07 taking advantag
无法在 routerOnActivate 上获取查询参数

我在尝试使用新的路线库获取查询参数时遇到问题 VERSION2 0 0 rc 1 Problem routerOnActivate curr RouteSegment prev RouteSegment currTree RouteTree
在 MatDialog Content Angular 7 中添加新行

我正在使用 MatDialog 并尝试在内容定义中添加新行两个都 n and 没有这样做有没有另一种方法无需手动进入 html 并更改它因为它是可重用的组件 var status MatDialogRef
从字符串变量导入模块

我需要从内存变量导入 JavaScript 模块我知道这可以使用SystemJS and Webpack 但我找不到一个好的工作示例或文档文档主要讨论 js 文件的动态导入基本上我需要像下面这样导入模块 let moduleData
Angular 2：如何从组件控制

这个问题在这里已经有答案了我尝试使用 Angular 2 但停止处理 HTML 5 视频在手册中我发现可以在模板中使用
更改 Angular 对话框的背景颜色

我正在尝试更改对话框背景无需触摸style css file 正如其他一些答案所说有很多方法可以设置对话框样式 1 此解决方案适用于宽度和高度但透明背景被忽略 this dialog open DialogComponent dis
验证以防止角度形式出现重复的形式值

我有几个表单数组我需要进行验证以便每个表单行中的特定字段在所有表单数组中必须是唯一的如果任何值出现多次则两个表单字段都必须标记为红色我设法编写了一个函数以便如果这些字段有任何更改该函数将返回 true false 但我不确定如
如何在 Angular 应用程序中动态更改 CSS 类名称？

我有两个 CSS 类名如下所示 icon heart color bdbdbd icon heart red color a6b7d4 我的 HTML 包含一个心形图标 div class icon heart div
如何在 Angular 中实现全局加载器

我有一个全局加载器其实现如下核心模块 router events pipe filter x gt x instanceof NavigationStart subscribe gt loaderService show router
Angular 6 - 将事件处理程序添加到动态创建的 html 元素

我想将点击事件附加到动态创建的 html 元素单击事件应该能够触发组件中的另一个方法我已经浏览过其他建议使用 ElementRef 附加事件的答案但是它不适用于我的情况我正在使用 mapQuest API 来渲染地图地图将绘制地
Mapbox 打字稿

通过关注这个项目我成功地让 Leaflet 与 Angular 2 和 Webpack 一起工作 Angular 2 传单启动器 https github com haoliangyu angular2 leaflet starter 我
@angular/router 3.0.0-alpha.3：如何迁移OnActivate

我刚刚将 angular router 升级到 3 0 0 alpha 3 但是我找不到 2 0 0 rc 1 中提供的 OnActivate 接口任何提示表示赞赏因为我们还没有任何文档并将在接下来的几周内提供你想要一个提示这是
为 Angular 2 配置history.pushState

我的 Angular 2 应用程序使用默认值HTML 5 history pushState https developer mozilla org en US docs Web API History API Adding and mod
Angular 7 routerLink 指令警告“导航在 Angular 区域外触发”

我正在努力使用 Angular 框架来让我的应用程序顺利运行但我无法解决路由问题我有顶级水平AppComponent and app routing module ts通过我的自定义管理导航SlideMenuComponent 我的简化

随机推荐

滑块输入延迟

有没有办法使sliderInput http shiny rstudio com reference shiny latest sliderInput html等待几秒钟然后它会更改其对应的input 多变的我有一个栏正在控制需要根据值
使用 Mac 应用程序部署 Qt 框架以及 otool 的使用

我在使用我的 Mac 应用程序部署 Qt 框架时遇到问题我希望有人能知道为什么当我在干净的 Mac 即不是开发人员 Mac 上运行该应用程序时会出现此错误操作系统 10 7 2 并使用 XCode 错误消息 Library not lo
如何使用列表（或元组）作为字符串格式化值

假设这个变量 s Python rocks x s s s 0 s 1 现在我想替换更长的列表并分别添加所有列表值例如 s 0 s 1 s n 似乎不正确引用自文档给定格式值如果格式需要一个参数值可以是单个非元组对象 4
如何在 F# 中的集群配置中创建参与者

我正在创建一个示例Akka Cluster具有三个节点 A B 和 C 其中 A 是灯塔到目前为止从日志来看当没有参与者或参与者是本地的使用创建的时集群工作正常spawn and spawnOpt 我想从 B 创建一个 acto
TextMate：注释行快捷方式不再起作用（我的瑞士布局上的 Cmd-/ 或 Cmd-Shift-7）

一段时间以来我在 TextMate 中遇到了一种非常奇怪的行为 I had troubles to use the keyboard shortcut for commenting a line which is Cmd or on my
如何在 Swift 中为 IOS 生成 RSA 非对称密钥对？

我需要一种在 Swift 中生成 RSA 非对称密钥对的方法我不需要将它存储在钥匙串或任何东西中我只需要生成一个密钥对并将两个密钥放入字符串变量中这些密钥确实需要与另一端的 PHP 兼容我将使用对称加密来保护私钥并将其存储在手机上
isset 具有可变数组键数

该数组是多维的并且具有可变数量的子键例如 arr a b c X 在这种情况下为3 我想创建一个函数它接受一个像这样的字符串a b c作为参数并检查数组中是否包含该键然后取消设置它 unset arr a b c 如果我给它a b那
PySpark UDF 优化挑战

我正在尝试优化下面的代码当运行 1000 行数据时大约需要 12 分钟才能完成我们的用例需要数据大小约为 25K 50K 行这将使此实现完全不可行 import pyspark sql types as Types import n
对话框活动还会在后台恢复其他活动

这就是场景我的应用程序中有 2 个活动以及一个当我单击应用程序创建的通知时启动的对话框活动问题是当我单击通知时如果按主页按钮停止则仅应显示对话框而不应显示应用程序的其他活动当我通过按后退按钮关闭应用程序时对话框活动会显示对
检查用户是否是 C 中的 root？

如何验证用户是否是root 通常测试用户是否为 root 是错误的 POSIX 甚至不需要 root 用户而是将其留给实现来确定权限如何工作代码如 if i am root do privileged op else print err
PHP 字符串转十六进制

我有一个这样的字符串 0 9A Za z 如何转换为以下形式 133 x30 55 x39 101 x2d 132 x61 55 x7a 134 x2b 57 x3d 135 x2a 有什么功能吗 function strtohex str
如何对 CopyOnWriteArrayList 进行排序

我想排序CopyOnWriteArrayList 但是当我尝试运行以下代码时它正在投掷unsorted operation exception public class CopyOnWriteArrayListExample public
PHP 查找字符串中所有出现的子字符串

我需要解析 HTML 文档并查找所有出现的字符串asdf in it 我目前已将 HTML 加载到字符串变量中我只想要字符位置这样我就可以循环列表以在字符串后面返回一些数据 The strpos函数仅返回first发生回国怎么样all
如何检测向量中的空值

检测向量中的空值的最佳方法是什么如果我有下面的向量并且想知道第四个位置为空我该怎么做 vx lt c 1 2 3 NULL 5 is null 仅返回FALSE is null vx 1 FALSE 我想得到 FALSE FALSE F
游戏中心组

我有一款带有 Game Center 排行榜的 iOS 游戏我几个月前发布了这款游戏现在正在开发 OSX 版本我想为两个版本的游戏使用相同的排行榜这意味着我需要创建一个 Game Center 组问题是当您将排行榜 ID 移动到
判断Android应用是否是第一次使用

我目前正在开发一个 Android 应用程序我需要在应用程序第一次启动时做一些事情即代码仅在程序第一次启动时运行您可以使用共享首选项以确定这是否是应用程序的第一次启动只需使用一个布尔变量 my first time 并将其值更改
流星js如何从服务器将文件写入磁盘

我正在编写一个流星包 myPackage 它需要使用 Npm FileSystem 和 Pah 模块将文件写入磁盘该文件最终应位于 example app packages myPackage auto generated myFile
打印数组显示错误的输出

这段代码有什么问题我得到了错误的输出我不知道出了什么问题希望您能帮助我 public class Main public static void main String args int data 11 22 33 55 22 88
正则表达式匹配正则表达式

是否可以写一个与正则表达式匹配的正则表达式有人有例子吗如果存在一些理论上的障碍是否有人知道至少可以匹配最常见的正则表达式模式的正则表达式正则表达式不是正则语言因此不能用正则表达式来描述 Update 更有用的实用答案您无法使用任
无法绑定到“数据”，因为它不是“画布”的已知属性

我正在尝试使用 ng2 charts 并遇到错误提示我使用的元素不正确我在这个网站上尝试了一些答案但没有成功 NG2 Charts 无法绑定到数据集因为它不是画布的已知属性 https stackoverflow com qu

无法绑定到“数据”，因为它不是“画布”的已知属性

无法绑定到“数据”，因为它不是“画布”的已知属性 的相关文章

随机推荐

热门标签

无法绑定到“数据”，因为它不是“画布”的已知属性的相关文章