C3.js在Angular2得到错误

我想在角2项目中使用c3.js和我不断收到同样的错误：C3.js在Angular2得到错误

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：

 <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.12/c3.css" rel="stylesheet" type="text/css">  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js" charset="utf-8"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.12/c3.js"></script>

app.module.ts：

...（文件的开头）

import { RcpChartComponent } from './chart.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    RcpChartComponent

...（结束文件）

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(); 
} 
}

configuration.chart.ts：

import { RcpChart } from "./chart.component";

export const CHARTS: RcpChart[] = [
{ id: "line", name: "A vs B", type: "line" }
];

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); 
    } 
}

现在著名的图表组件，

chart.component.ts：

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(); 
    }

我知道这有点长，但我应该错过了一些非常容易的事情，任何帮助都将受到高度赞赏。

来源

2017-06-04 D. Ister

我想你会走很长的路线。只需按照c3.js的官方google group提供的步骤，使用Angular2项目配置c3.js图表。

来源

2017-10-12 09:36:43

C3.js在Angular2得到错误

回答

相关问题