我正在尝试使用Angular 4.0的ng2-charts,我想通过使用chart.js来完成同样的事情:

    ...
    
    ...

    
    

我所做的是

npm install ng2-charts --save
npm install chart.js --save

我补充说

到src/index.html

和

import { ChartsModule } from 'ng2-charts';

imports: [
   ChartsModule
]

到src/app/app.module.ts

你能告诉我一个src/index.html,src/app/app.component.html和app/component.ts的工作示例吗？因为我在例子中遇到了一些问题

GET 
http://localhost:4200/node_modules/chart.js/src/chart.js [HTTP/1.1 404 Not Found 8 ms]
ERROR Error: "undefined" is not a chart type.

即使我改变了chart.js的位置.

SRC/index.html的

  
  
  

  
  

  




  Loading...

SRC /应用程序/ app.component.html

  {{title}}


    

      
    
    Update

SRC /应用程序/ app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  public chartData: Array = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];

}

CharanRoot.. 8

将chart.js更改为

app模块ts代码

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

// In your App's module:
imports: [
   ChartsModule
]

更新 删除index.html中的脚本标记并添加

检查你的angular-cli.json和scripts数组,然后在里面添加:

"../node_modules/chart.js/dist/Chart.bundle.min.js"

将chart.js更改为

app模块ts代码

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

// In your App's module:
imports: [
   ChartsModule
]

更新 删除index.html中的脚本标记并添加

检查你的angular-cli.json和scripts数组,然后在里面添加:

"../node_modules/chart.js/dist/Chart.bundle.min.js"