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



我一直在用Angular-2做一个项目,使用这里的starter项目,

这个项目工作得很好,直到我对我的环境和项目进行了一些更新。现在数据对象将不会绑定。看起来charts.js没有被正确导入到项目中。

我确实在文档中看到,这里声明将charts.js文件嵌入到html文件中。在示例中,通过向src中添加node_modules来实现。我还以为这是绝对不可以的呢!我确实尝试过,但无法让应用程序在以这种方式引用时暴露文件。

当前版本
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之前,图表显示良好。既然我已经更新了所有内容,即使回滚似乎也无法解决问题。

基本上在我的组件的任何地方。当我将数据对象绑定到图表时,它会给我错误,说数据对象不是基本图表的已知属性。我相信这是一个版本问题,更新后没有正确导入项目。

我在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

选择器base-chart不再有效。

Per ng2-charts changelog

base-chart组件变成了baseChart指令,所以你需要转换

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

<canvas baseChart...></canvas>

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

参见Plunker示例

相关内容

  • 没有找到相关文章

最新更新