Angular2中的C3.js出错

时间:2017-06-04 07:43:22

标签: javascript angular d3.js angular2-template c3.js

我正在尝试在角度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:

<!-- CSS for C3 --> <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.12/c3.css" rel="stylesheet" type="text/css"> <!-- Load d3.js--> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js" charset="utf-8"></script> <!-- Load c3.js--> <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:

  

从&#34; ./ chart.component&#34;;

导入{RcpChart}      

export const CHARTS:RcpChart [] = [
      {         id:&#34; line&#34;,         名称:&#34; A vs B&#34;,         键入:&#34; line&#34;       }     ];

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

我知道它有点长,但我应该很容易错过任何帮助,我们将非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

I think you are going the long route. Just follow the steps provided in the official google group of c3.js to configure it c3.js chart with the Angular2 project.