NG2-Charts 无法绑定到“数据集"，因为它不是“画布"的已知属性 [英] NG2-Charts Can't bind to 'datasets' since it isn't a known property of 'canvas'

查看：9
本文介绍了NG2-Charts 无法绑定到“数据集"，因为它不是“画布"的已知属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 NG2-Charts 的基本示例 (http://valor-software.com/ng2-charts/)

我复制粘贴了 HTML 部分

 
<canvas baseChart[数据集]="barChartData"[标签]="barChartLabels"[选项]="barChartOptions"[图例]="barChartLegend"[chartType]="barChartType"(chartHover)="chartHovered($event)"(chartClick)="chartClicked($event)"></canvas>

和打字稿部分

 private barChartOptions: any = {scaleShowVerticalLines: 假,响应:真实};private barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];私人 barChartType: string = 'bar';私人 barChartLegend: boolean = true;私人 barChartData: any[] = [{ 数据: [65, 59, 80, 81, 56, 55, 40], 标签: '系列 A' },{ 数据: [28, 48, 40, 19, 86, 27, 90], 标签: '系列 B' }];//事件私人图表点击(e:任何):无效{控制台日志(e)；}私人图表悬停(e:任何):无效{控制台日志(e)；}

我运行 npm install ng2-charts --save、npm install chart.js --save 和 typings install dt~chart.js --save--全局

我还在我的 vendor.ts 文件中导入了 chart.js

import 'chart.js';

我的依赖:

<代码>{"@angular/common": "^2.0.0","@angular/compiler": "2.0.0","@angular/core": "2.0.0","@angular/forms": "2.0.0","@angular/http": "2.0.0","@angular/platform-b​​rowser": "2.0.0","@angular/platform-b​​rowser-dynamic": "2.0.0","@angular/router": "3.0.0","angular2-jwt": "^0.1.18","chart.js": "^2.3.0","core-js": "^2.4.0","json-loader": "^0.5.4","时刻": "^2.14.1","ng2-charts": "^1.4.0",反射元数据":0.1.2"，"rxjs": "5.0.0-beta.11",zone.js":^0.6.23"}

这里是错误

未处理的承诺拒绝:模板解析错误:无法绑定到数据集"，因为它不是画布"的已知属性.(iuminfooneoptionsTwo"><div style="display: block"><canvas baseChart [ERROR ->][datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLeg"): PlayerprofileComponent@39:34无法绑定到标签"，因为它不是画布"的已知属性.(" <div style="display: block"><canvas baseChart [datasets]="barChartData" [ERROR ->][labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChart"): PlayerprofileComponent@39:60无法绑定到选项"，因为它不是画布"的已知属性.(躺:块"><canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR ->][options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartH"): PlayerprofileComponent@39:86无法绑定到legend"，因为它不是canvas"的已知属性.(" <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR ->][legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)"): PlayerprofileComponent@39:114无法绑定到chartType"，因为它不是canvas"的已知属性.("ets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [ERROR ->][chartType]="barChartType" (chartHover)="chartHovered($事件)" (chartClick)="chartClicked($event)">"): PlayerprofileComponent@39:140 ; 区域: <root> ; 任务: Promise.then ; 值: 错误: 模板解析错误:(...) 错误: 模板解析错误:无法绑定到数据集"，因为它不是画布"的已知属性.(iuminfooneoptionsTwo"><div style="display: block"><canvas baseChart [ERROR ->][datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLeg"): PlayerprofileComponent@39:34无法绑定到标签"，因为它不是画布"的已知属性.(" <div style="display: block"><canvas baseChart [datasets]="barChartData" [ERROR ->][labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChart"): PlayerprofileComponent@39:60无法绑定到选项"，因为它不是画布"的已知属性.(躺:块"><canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR ->][options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartH"): PlayerprofileComponent@39:86无法绑定到legend"，因为它不是canvas"的已知属性.(" <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR ->][legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)"): PlayerprofileComponent@39:114无法绑定到chartType"，因为它不是canvas"的已知属性.("ets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [ERROR ->][chartType]="barChartType" (chartHover)="chartHovered($事件)" (chartClick)="chartClicked($event)">"): PlayerprofileComponent@39:140在 TemplateParser.parse(在  (http://localhost:8080/vendor.js:623:1), :133:19 处评估)在 RuntimeCompiler._compileTemplate(在  (http://localhost:8080/vendor.js:2103:1), :244:51 处评估)at eval(eval at  (http://localhost:8080/vendor.js:2103:1), :167:83)在 Set.forEach(本机)在编译时(在 <匿名> (http://localhost:8080/vendor.js:2103:1)、<匿名>:167:47 处进行评估)在 ZoneDelegate.invoke(在  (http://localhost:8080/polyfills.js:4105:1), :192:28 处评估)在 Zone.run(在  (http://localhost:8080/polyfills.js:4105:1), :85:43 处评估)在 eval (eval at  (http://localhost:8080/polyfills.js:4105:1), :451:57)在 ZoneDelegate.invokeTask(在  (http://localhost:8080/polyfills.js:4105:1), :225:37 处评估)在 Zone.runTask(在  (http://localhost:8080/polyfills.js:4105:1), :125:47 处评估)在drainMicroTaskQueue(在<anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:357:35)进行评估

NG2-Charts 网站说我需要将其包含在 HTML 中

<script src="node_modules/chart.js/src/chart.js"></script>

但我认为那是不正确的，因为该声明如何在高效的缩小/构建的应用程序中工作?我还认为我的 webpack 导入语句已经解决了这个问题?我用谷歌搜索，但遗憾的是只在 NG2 Charts 上找到了一些 Angular 2 Beta 版本的内容.

有人知道如何解决这个问题吗?

谢谢和干杯，拉斐尔·希佩

解决方案

尝试像这样在 app.module.ts 中导入 ChartsModule-

import { ChartsModule } from 'ng2-charts/ng2-charts';进口:[.....图表模块.....]

I am trying to use the basic example of NG2-Charts (http://valor-software.com/ng2-charts/)

I copy pasted the HTML part

  <div style="display: block">
    <canvas baseChart
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"></canvas>
  </div>

and the TypeScript part

  private barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  private barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  private barChartType: string = 'bar';
  private barChartLegend: boolean = true;

  private barChartData: any[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
  ];

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

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

I run npm install ng2-charts --save, npm install chart.js --save and typings install dt~chart.js --save --global

I also imported chart.js in my vendor.ts file

import 'chart.js';

My dependencies: 

{
    "@angular/common": "^2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "angular2-jwt": "^0.1.18",
    "chart.js": "^2.3.0",
    "core-js": "^2.4.0",
    "json-loader": "^0.5.4",
    "moment": "^2.14.1",
    "ng2-charts": "^1.4.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.11",
    "zone.js": "^0.6.23"
  }

Here is the Error

Unhandled Promise rejection: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("iuminfooneoptionsTwo">
            <div style="display: block">
                <canvas baseChart [ERROR ->][datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLeg"): PlayerprofileComponent@39:34
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("          <div style="display: block">
                <canvas baseChart [datasets]="barChartData" [ERROR ->][labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChart"): PlayerprofileComponent@39:60
Can't bind to 'options' since it isn't a known property of 'canvas'. ("lay: block">
                <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR ->][options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartH"): PlayerprofileComponent@39:86
Can't bind to 'legend' since it isn't a known property of 'canvas'. ("  <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR ->][legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)"): PlayerprofileComponent@39:114
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("ets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [ERROR ->][chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
"): PlayerprofileComponent@39:140 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("iuminfooneoptionsTwo">
            <div style="display: block">
                <canvas baseChart [ERROR ->][datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLeg"): PlayerprofileComponent@39:34
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("          <div style="display: block">
                <canvas baseChart [datasets]="barChartData" [ERROR ->][labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChart"): PlayerprofileComponent@39:60
Can't bind to 'options' since it isn't a known property of 'canvas'. ("lay: block">
                <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR ->][options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartH"): PlayerprofileComponent@39:86
Can't bind to 'legend' since it isn't a known property of 'canvas'. ("  <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR ->][legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)"): PlayerprofileComponent@39:114
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("ets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [ERROR ->][chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
"): PlayerprofileComponent@39:140
    at TemplateParser.parse (eval at <anonymous> (http://localhost:8080/vendor.js:623:1), <anonymous>:133:19)
    at RuntimeCompiler._compileTemplate (eval at <anonymous> (http://localhost:8080/vendor.js:2103:1), <anonymous>:244:51)
    at eval (eval at <anonymous> (http://localhost:8080/vendor.js:2103:1), <anonymous>:167:83)
    at Set.forEach (native)
    at compile (eval at <anonymous> (http://localhost:8080/vendor.js:2103:1), <anonymous>:167:47)
    at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:192:28)
    at Zone.run (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:85:43)
    at eval (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:451:57)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:225:37)
    at Zone.runTask (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:125:47)
    at drainMicroTaskQueue (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:357:35)

The NG2-Charts website says I need to include this in the HTML

<script src="node_modules/chart.js/src/chart.js"></script>

But I think thats not correct because how would that statement work in a productive minified / built app? I also thought my webpack import statement would already take care of that? I googled around but sadly only found stuff for some Angular 2 Beta version on NG2 Charts.

Does anyone has an idea on how to fix that?

Thanks and Cheers, Raphael Hippe

解决方案

Try importing ChartsModule in your app.module.ts like this-

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

imports: [
   .....
   ChartsModule
   .....
]

这篇关于NG2-Charts 无法绑定到“数据集"，因为它不是“画布"的已知属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆