我正在尝试在角度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();
}
我知道它有点长,但我应该很容易错过任何帮助,我们将非常感谢任何帮助。
答案 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.