Javascript Angular2中的C3.js获取错误

我试图在angular 2项目中使用c3.js，但我一直遇到相同的错误：

AppComponent.html:5 ERROR TypeError: Cannot read property 'id' of undefined
at Object.eval [as updateRenderer] (ng:///AppModule/AppComponent.ngfactory.js:39:29)
...

没有编译错误

index.html：

app.module.ts：

。。。（文件开头）

。。。（文件末尾）

app.component.ts：

import { Component, OnInit } from '@angular/core';
import { RcpChart } from './chart.component';
import { RcpChartDataService } from './data.service';

@Component({
selector: 'app-root',
providers: [RcpChartDataService],
template: `
  <h1>My Title</h1>
  <div>Chart:</div>
  <div>
  <rcpchart style="text-align:center; height:700px;  width:700px"[id]="chart.id"></rcpchart>
  `
})
export class AppComponent implements OnInit{
title = 'My Title';
chart: RcpChart;

constructor(private rcpChartDataService: RcpChartDataService) { }

getCharts(): void {
  this.rcpChartDataService.getChartData().then(charts => this.chart =  charts);

}

ngOnInit(): void {
  this.getCharts();
} 
}

 import {Component, Input, Output, EventEmitter, OnInit, AfterViewInit, 
  ChangeDetectorRef, Compiler} from '@angular/core'; 
  import { CHARTS } from './configuration.chart'; 
  import { RcpChartDataService } from './data.service';

declare var d3, c3: any;

export class RcpChart { 
  id?: string; 
  name?: string; 
  type?: string; 
  parameters?: any[]; 
}
@Component({
  selector: 'rcpchart', 
  providers: [RcpChartDataService], 
  template:`
<table style="border:solid">
<tr>
    <td> 
      <div style="height: 300px">
      <h1 *ngIf="chart">{{chart.name}}</h1>
        <svg [id]="chart.id"></svg>
      </div> 
    </td>
    <td>
      <div *ngIf="!data">
        Data Not Available
      </div>
    </td>
</tr>     
</table>

`
})

export class RcpChartComponent implements AfterViewInit{
  @Input() chart: RcpChart;
  data: any;

  constructor(private rcpChartDataService: RcpChartDataService){}

  ngAfterViewInit() {
    console.log("CHART starts drawing AFTER VIEW INIT :" + this.chart.id);

      this.drawChart(this.chart);
}

drawChartLine(chartConfig: RcpChart) {

    //line chart
    let chart = c3.generate({
      bindto: '#' + chartConfig.id,
      type: 'line',
      data: {
        columns: [
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 50, 20, 10, 40, 15, 25]
        ]
      }
    });
  }

  drawChart(chartConfig: RcpChart) {
    if (chartConfig.type === 'line') this.drawChartLine(chartConfig);
  }

  getCharts(): void {
    this.rcpChartDataService.getChartData().then(charts => this.chart = charts);
  }

  ngOnInit(): void {
    this.getCharts();
  }

从'@angular/core'导入{Component，OnInit}；
从“./chart.component”导入{RcpChart}；
从“./data.service”导入{RcpChartDataService}；
@组成部分({
选择器：'应用程序根'，
提供者：[RcpChartDataService]，
模板：`
我的头衔
图表：
`
})
导出类AppComponent实现OnInit{
标题=‘我的标题’；
图表：RcpChart；
构造函数（私有rcpChartDataService:rcpChartDataService）{}
getCharts（）：void{
this.rcpChartDataService.getChartData（）。然后（charts=>this.chart=charts）；
}
ngOnInit（）：void{
这个.getCharts（）；
} 
}

configuration.chart.ts：

从“/chart.component”导入{RcpChart}”

导出常量图表：RcpChart[]=[
{ id:“行”， 名称：“A对B”， 类型：“行” }
];

data.service.ts：

import { Injectable } from '@angular/core';
import { CHARTS } from './configuration.chart';
import {RcpChart} from "./chart.component";

@Injectable()
  export class RcpChartDataService {
    getChartData(): Promise<any> {
      return Promise.resolve(CHARTS);
  }
}

从'@angular/core'导入{Injectable}；
从“./configuration.chart”导入{CHARTS}；
从“/chart.component”导入{RcpChart}”；
@可注射（）
导出类RcpChartDataService{
getChartData（）：承诺{
返回承诺。解决（图表）；
}
}

还有现在著名的图表组件

chart.component.ts：

import { Component, OnInit } from '@angular/core';
import { RcpChart } from './chart.component';
import { RcpChartDataService } from './data.service';

@Component({
selector: 'app-root',
providers: [RcpChartDataService],
template: `
  <h1>My Title</h1>
  <div>Chart:</div>
  <div>
  <rcpchart style="text-align:center; height:700px;  width:700px"[id]="chart.id"></rcpchart>
  `
})
export class AppComponent implements OnInit{
title = 'My Title';
chart: RcpChart;

constructor(private rcpChartDataService: RcpChartDataService) { }

getCharts(): void {
  this.rcpChartDataService.getChartData().then(charts => this.chart =  charts);

}

ngOnInit(): void {
  this.getCharts();
} 
}

 import {Component, Input, Output, EventEmitter, OnInit, AfterViewInit, 
  ChangeDetectorRef, Compiler} from '@angular/core'; 
  import { CHARTS } from './configuration.chart'; 
  import { RcpChartDataService } from './data.service';

declare var d3, c3: any;

export class RcpChart { 
  id?: string; 
  name?: string; 
  type?: string; 
  parameters?: any[]; 
}
@Component({
  selector: 'rcpchart', 
  providers: [RcpChartDataService], 
  template:`
<table style="border:solid">
<tr>
    <td> 
      <div style="height: 300px">
      <h1 *ngIf="chart">{{chart.name}}</h1>
        <svg [id]="chart.id"></svg>
      </div> 
    </td>
    <td>
      <div *ngIf="!data">
        Data Not Available
      </div>
    </td>
</tr>     
</table>

`
})

export class RcpChartComponent implements AfterViewInit{
  @Input() chart: RcpChart;
  data: any;

  constructor(private rcpChartDataService: RcpChartDataService){}

  ngAfterViewInit() {
    console.log("CHART starts drawing AFTER VIEW INIT :" + this.chart.id);

      this.drawChart(this.chart);
}

drawChartLine(chartConfig: RcpChart) {

    //line chart
    let chart = c3.generate({
      bindto: '#' + chartConfig.id,
      type: 'line',
      data: {
        columns: [
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 50, 20, 10, 40, 15, 25]
        ]
      }
    });
  }

  drawChart(chartConfig: RcpChart) {
    if (chartConfig.type === 'line') this.drawChartLine(chartConfig);
  }

  getCharts(): void {
    this.rcpChartDataService.getChartData().then(charts => this.chart = charts);
  }

  ngOnInit(): void {
    this.getCharts();
  }

import{组件、输入、输出、EventEmitter、OnInit、AfterViewInit、，
ChangeDetectorRef，编译器}来自“@angular/core”；
从“./configuration.chart”导入{CHARTS}；
从“./data.service”导入{RcpChartDataService}；
声明变量d3、c3：任何；
导出类RcpChart{
id？：字符串；
名称？：字符串；
类型？：字符串；
参数？：任意[]；
}
@组成部分({
选择器：“rcpchart”，
提供者：[RcpChartDataService]，
模板：`
{{chart.name}
数据不可用
`
})
导出类RcpChartComponent实现AfterViewInit{
@输入（）图表：RcpChart；
资料：有；
构造函数（私有rcpChartDataService:rcpChartDataService）{}
ngAfterViewInit（）{
log（“图表在视图初始化：+this.CHART.id之后开始绘制”）；
这个.绘图图（这个.图表）；
}
drawChartLine（chartConfig:RcpChart）{
//折线图
让chart=c3.0生成({
bindto:“#”+chartConfig.id，
键入：“行”，
数据：{
栏目：[
[data1'，30200100400150250]，
[data2'，50，20，10，40，15，25]
]
}
});
}
绘图图（chartConfig:RcpChart）{
如果（chartConfig.type==='line'）这个.drawChartLine（chartConfig）；
}
getCharts（）：void{
this.rcpChartDataService.getChartData（）。然后（charts=>this.chart=charts）；
}
ngOnInit（）：void{
这个.getCharts（）；
}

---

我知道它有点长，但我应该错过一些非常简单的东西，任何帮助都将不胜感激。

我认为你走的路很长。只需按照c3.js官方文件中提供的步骤将其配置为带有Angular2项目的c3.js图表