Angular 2 Chart.js 和 NG2-Charts 在更新到项目后未绑定数据对象

Question

我一直在使用 here、

中找到的入门项目在 Angular-2 中开展一个项目

在我对我的环境和项目进行一些更新之前，该项目运行良好。现在数据对象不会绑定。似乎 charts.js 没有正确导入到项目中。

我确实在文档 Here 中看到它声明将 charts.js 文件嵌入到 html 文件中。在示例中，这是通过将 node_modules 添加到 src 来完成的。我的印象是这是一个巨大的不不！我确实试过了，但无法让应用程序在以这种方式引用时公开文件。

当前版本

angular-cli: 1.0.0-beta.17
node: 6.7.0
os: darwin x64 Sierra
npm: 3.10.3

更新到

后

"angular-cli": "1.0.0-beta.17"

我开始遇到错误。我继续将所有内容更新到最新版本，希望这能清除它们。更新后似乎 Charts.js 没有导入到项目中。在更新 angular-cli 之前图表显示良好。现在我已经更新了所有内容，即使回滚似乎也无法解决问题。

基本上，在我的 component.ts 文件中，我将数据对象绑定到图表的任何地方都会给我错误消息，指出该数据对象不是已知的属性基本图表。我相信这是一个版本控制问题，并且在更新后没有正确导入到项目中。

我在 angular-cli.json

中导入这样的图表

"scripts": [
        "../node_modules/chart.js/dist/Chart.bundle.min.js",
        "../node_modules/chart.js/dist/Chart.min.js"
      ],

然后在app.module.ts

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

@NgModule({
  imports: [
    BrowserModule,
    routing,
    Ng2BootstrapModule,
    ChartsModule
  ],

当前版本我是运行、

"dependencies": {
    "@angular/common": "2.0.2",
    "@angular/compiler": "2.0.2",
    "@angular/core": "2.0.2",
    "@angular/forms": "2.0.2",
    "@angular/http": "2.0.2",
    "@angular/platform-browser": "2.0.2",
    "@angular/platform-browser-dynamic": "2.0.2",
    "@angular/router": "3.0.2",
    "@angular/upgrade": "2.0.2",
    "core-js": "^2.4.0",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "0.6.25",
    "chart.js": "^2.3.0",
    "ng2-bootstrap": "^1.1.5",
    "ng2-charts": "^1.3.0",
    "moment": "^2.15.1"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.34",
    "angular-cli": "1.0.0-beta.17",
    "codelyzer": "1.0.0-beta.0",
    "jasmine-core": "^2.5.1",
    "jasmine-spec-reporter": "2.7.0",
    "karma": "1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.4.1",
    "tslint": "^3.15.1",
    "typescript": "^2.0.3"
  }

这里有一些错误，

Can't bind to 'datasets' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'datasets' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("iv>
                <div class="chart-wrapper p-x-1">
                    <base-chart class="chart" [ERROR ->][datasets]="lineChart1Data" [labels]="lineChart1Labels" [options]="lineChart1Options" [colors]="lineC"): DashboardComponent@19:46
Can't bind to 'labels' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'labels' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("ss="chart-wrapper p-x-1">
                    <base-chart class="chart" [datasets]="lineChart1Data" [ERROR ->][labels]="lineChart1Labels" [options]="lineChart1Options" [colors]="lineChart1Colours" [legend]="line"): DashboardComponent@19:74
Can't bind to 'options' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("                  <base-chart class="chart" [datasets]="lineChart1Data" [labels]="lineChart1Labels" [ERROR ->][options]="lineChart1Options" [colors]="lineChart1Colours" [legend]="lineChart1Legend" [chartType]="l"): DashboardComponent@19:102
Can't bind to 'colors' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'colors' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("class="chart" [datasets]="lineChart1Data" [labels]="lineChart1Labels" [options]="lineChart1Options" [ERROR ->][colors]="lineChart1Colours" [legend]="lineChart1Legend" [chartType]="lineChart1Type" (chartHover)="c"): DashboardComponent@19:132
Can't bind to 'legend' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'legend' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("eChart1Data" [labels]="lineChart1Labels" [options]="lineChart1Options" [colors]="lineChart1Colours" [ERROR ->][legend]="lineChart1Legend" [chartType]="lineChart1Type" (chartHover)="chartHovered($event)" (chartCl"): DashboardComponent@19:161
Can't bind to 'chartType' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'chartType' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("hart1Labels" [options]="lineChart1Options" [colors]="lineChart1Colours" [legend]="lineChart1Legend" [ERROR ->][chartType]="lineChart1Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
"): DashboardComponent@19:189

Answer 1

选择器base-chart不再有效。

Per ng2-charts changelog

base-chart component became baseChart directive so you need to convert

<base-chart...></base-chart>

至

<canvas baseChart...></canvas>

并且很可能包含在

中

<div style='display:block'>...</div>

见Plunker Example

Angular 2 Chart.js 和 NG2-Charts 在更新到项目后未绑定数据对象

Angular 2 Chart.js and NG2-Charts Not Binding Data Objects After Updates To Project

javascript

chart.js

angular-cli

ng2-charts

angular