我正在尝试使用ng2-charts（http://valor-software.com/ng2-charts/）来显示折线图。
网站上没有太多的教程 - 我已经按照安装步骤操作，目前正在查看他们为折线图部分包含的Markup和TypeScript。我把他们的代码剪切并粘贴到我的代码中，没有任何东西出现。这里有没有人有ng2-charts的经验 - 如果有的话你能指出我正确的方向吗？
这是我的HTML：
<div class="row">
<div class="col-md-6">
<base-chart class="chart"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColours"
[legend]="lineChartLegend"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></base-chart>
</div>
<div class="col-md-6" style="margin-bottom: 10px;">
<table class="table table-responsive table-condensed">
<tr>
<th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j=index"></td>
</tr>
</table>
<button (click)="randomize()">CLICK</button>
</div>
这是我的TypeScript文件：
import {Http, Headers, Response} from 'angular2/http';
import {Component} from 'angular2/core';
import {Injectable} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
import {Router} from 'angular2/router';
import {Routes} from '../routes.config';
import {ATRService} from '../atr/atr.service';
import {AtrConfiguration} from '../atrConfiguration/atrConfiguration.model';
import {HTTP_PROVIDERS} from 'angular2/http';
import {Observable} from 'rxjs/Rx';
import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';
declare var Chart: any;
@Component({
selector: 'home',
templateUrl: './app/home/home.html',
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass],
providers: [
HTTP_PROVIDERS, ATRService
]
})
export class Home {
public sensors: Array<string> = [];
public selectedSensor: string = null;
public atrConfigs: Array<AtrConfiguration> = [];
public selectedConfiguration: string = null;
constructor(private _http: Http, private _atrService: ATRService) {
this.getSensors()
.subscribe(res => {
this.sensors = res;
});
_atrService.getConfigurations()
.subscribe(res => {
this.atrConfigs = res;
});
}
getSensors() {
//return an observable
console.log('Home:getSensors entered...');
return this._http.get('/atr/sensors')
.map((response) => {
console.log(response);
return response.json();
});
}
// lineChart
public lineChartData: Array<any> = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
{ data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C' }
];
public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
public lineChartOptions: any = {
animation: false,
responsive: true
};
public lineChartColours: Array<any> = [
{ // grey
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
},
{ // dark grey
backgroundColor: 'rgba(77,83,96,0.2)',
borderColor: 'rgba(77,83,96,1)',
pointBackgroundColor: 'rgba(77,83,96,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(77,83,96,1)'
},
{ // grey
backgroundColor: 'rgba(148,159,177,0.2)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}
];
public lineChartLegend: boolean = true;
public lineChartType: string = 'line';
public randomize(): void {
let _lineChartData: Array<any> = new Array(this.lineChartData.length);
for (let i = 0; i < this.lineChartData.length; i++) {
_lineChartData[i] = { data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label };
for (let j = 0; j < this.lineChartData[i].data.length; j++) {
_lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
}
}
this.lineChartData = _lineChartData;
}
// events
public chartClicked(e: any): void {
console.log(e);
}
public chartHovered(e: any): void {
console.log(e);
}
}
编辑：我刚检查了Chrome的开发者工具，但我收到了这些错误：
EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property (" <table class="table table-responsive table-condensed">
<tr>
<th [ERROR ->]*ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of line"): Home@17:20
Can't bind to 'ngForLabel' since it isn't a known native property (" <table class="table table-responsive table-condensed">
<tr>
<th [ERROR ->]*ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of line"): Home@17:20
Property binding ngFor not used by any directive on an embedded template ("
<table class="table table-responsive table-condensed">
<tr>
[ERROR ->]<th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of "): Home@17:16
Property binding ngForLabel not used by any directive on an embedded template ("
<table class="table table-responsive table-condensed">
<tr>
[ERROR ->]<th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of "): Home@17:16
Parser Error: Unexpected token ; at column 35 in [ngFor let label of lineChartLabels; let j=index] in Home@20:20 ("
</tr>
<tr *ngFor="let d of lineChartData">
<td [ERROR ->]*ngFor="let label of lineChartLabels; let j=index"></td>
</tr>
</table>
"): Home@20:20
Can't bind to 'ngFor' since it isn't a known native property (" <th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr [ERROR ->]*ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j=ind"): Home@19:16
Can't bind to 'ngForD' since it isn't a known native property (" <th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr [ERROR ->]*ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j=ind"): Home@19:16
Property binding ngFor not used by any directive on an embedded template ("
<th *ngFor="let label of lineChartLabels"></th>
</tr>
[ERROR ->]<tr *ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j"): Home@19:12
Property binding ngForD not used by any directive on an embedded template ("
<th *ngFor="let label of lineChartLabels"></th>
</tr>
[ERROR ->]<tr *ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j"): Home@19:12
browser_adapter.js:76EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property (" <table class="table table-responsive table-condensed">
<tr>
<th [ERROR ->]*ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of line"): Home@17:20
Can't bind to 'ngForLabel' since it isn't a known native property (" <table class="table table-responsive table-condensed">
<tr>
<th [ERROR ->]*ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of line"): Home@17:20
Property binding ngFor not used by any directive on an embedded template ("
<table class="table table-responsive table-condensed">
<tr>
[ERROR ->]<th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of "): Home@17:16
Property binding ngForLabel not used by any directive on an embedded template ("
<table class="table table-responsive table-condensed">
<tr>
[ERROR ->]<th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of "): Home@17:16
Parser Error: Unexpected token ; at column 35 in [ngFor let label of lineChartLabels; let j=index] in Home@20:20 ("
</tr>
<tr *ngFor="let d of lineChartData">
<td [ERROR ->]*ngFor="let label of lineChartLabels; let j=index"></td>
</tr>
</table>
"): Home@20:20
Can't bind to 'ngFor' since it isn't a known native property (" <th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr [ERROR ->]*ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j=ind"): Home@19:16
Can't bind to 'ngForD' since it isn't a known native property (" <th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr [ERROR ->]*ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j=ind"): Home@19:16
Property binding ngFor not used by any directive on an embedded template ("
<th *ngFor="let label of lineChartLabels"></th>
</tr>
[ERROR ->]<tr *ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j"): Home@19:12
Property binding ngForD not used by any directive on an embedded template ("
<th *ngFor="let label of lineChartLabels"></th>
</tr>
[ERROR ->]<tr *ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j"): Home@19:12BrowserDomAdapter.logError @ browser_adapter.js:76BrowserDomAdapter.logGroup @ browser_adapter.js:86ExceptionHandler.call @ exception_handler.js:56(anonymous function) @ application_ref.js:193schedulerFn @ async.js:122SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:124Subject._next @ Subject.js:116Subject.next @ Subject.js:73EventEmitter.emit @ async.js:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:119NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:65ZoneDelegate.handleError @ zone.js:310Zone.runGuarded @ zone.js:218drainMicroTaskQueue @ zone.js:469ZoneTask.invoke @ zone.js:408
browser_adapter.js:76STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:58(anonymous function) @ application_ref.js:193schedulerFn @ async.js:122SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:124Subject._next @ Subject.js:116Subject.next @ Subject.js:73EventEmitter.emit @ async.js:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:119NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:65ZoneDelegate.handleError @ zone.js:310Zone.runGuarded @ zone.js:218drainMicroTaskQueue @ zone.js:469ZoneTask.invoke @ zone.js:408
browser_adapter.js:76Error: Uncaught (in promise): Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property (" <table class="table table-responsive table-condensed">
<tr>
<th [ERROR ->]*ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of line"): Home@17:20
Can't bind to 'ngForLabel' since it isn't a known native property (" <table class="table table-responsive table-condensed">
<tr>
<th [ERROR ->]*ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of line"): Home@17:20
Property binding ngFor not used by any directive on an embedded template ("
<table class="table table-responsive table-condensed">
<tr>
[ERROR ->]<th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of "): Home@17:16
Property binding ngForLabel not used by any directive on an embedded template ("
<table class="table table-responsive table-condensed">
<tr>
[ERROR ->]<th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of "): Home@17:16
Parser Error: Unexpected token ; at column 35 in [ngFor let label of lineChartLabels; let j=index] in Home@20:20 ("
</tr>
<tr *ngFor="let d of lineChartData">
<td [ERROR ->]*ngFor="let label of lineChartLabels; let j=index"></td>
</tr>
</table>
"): Home@20:20
Can't bind to 'ngFor' since it isn't a known native property (" <th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr [ERROR ->]*ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j=ind"): Home@19:16
Can't bind to 'ngForD' since it isn't a known native property (" <th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr [ERROR ->]*ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j=ind"): Home@19:16
Property binding ngFor not used by any directive on an embedded template ("
<th *ngFor="let label of lineChartLabels"></th>
</tr>
[ERROR ->]<tr *ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j"): Home@19:12
Property binding ngForD not used by any directive on an embedded template ("
<th *ngFor="let label of lineChartLabels"></th>
</tr>
[ERROR ->]<tr *ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j"): Home@19:12
at resolvePromise (zone.js:517)
at zone.js:494
at ZoneDelegate.invoke (zone.js:306)
at Object.NgZoneImpl.inner.inner.fork.onInvoke (ng_zone_impl.js:44)
at ZoneDelegate.invoke (zone.js:305)
at Zone.run (zone.js:201)
at zone.js:550
at ZoneDelegate.invokeTask (zone.js:339)
at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.js:35)
at ZoneDelegate.invokeTask (zone.js:338)BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:59(anonymous function) @ application_ref.js:193schedulerFn @ async.js:122SafeSubscriber.__tryOrUnsub @ Subscriber.js:166SafeSubscriber.next @ Subscriber.js:115Subscriber._next @ Subscriber.js:74Subscriber.next @ Subscriber.js:51Subject._finalNext @ Subject.js:124Subject._next @ Subject.js:116Subject.next @ Subject.js:73EventEmitter.emit @ async.js:111NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:119NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:65ZoneDelegate.handleError @ zone.js:310Zone.runGuarded @ zone.js:218drainMicroTaskQueue @ zone.js:469ZoneTask.invoke @ zone.js:408
zone.js:443Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property (" <table class="table table-responsive table-condensed">
<tr>
<th [ERROR ->]*ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of line"): Home@17:20
Can't bind to 'ngForLabel' since it isn't a known native property (" <table class="table table-responsive table-condensed">
<tr>
<th [ERROR ->]*ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of line"): Home@17:20
Property binding ngFor not used by any directive on an embedded template ("
<table class="table table-responsive table-condensed">
<tr>
[ERROR ->]<th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of "): Home@17:16
Property binding ngForLabel not used by any directive on an embedded template ("
<table class="table table-responsive table-condensed">
<tr>
[ERROR ->]<th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr *ngFor="let d of "): Home@17:16
Parser Error: Unexpected token ; at column 35 in [ngFor let label of lineChartLabels; let j=index] in Home@20:20 ("
</tr>
<tr *ngFor="let d of lineChartData">
<td [ERROR ->]*ngFor="let label of lineChartLabels; let j=index"></td>
</tr>
</table>
"): Home@20:20
Can't bind to 'ngFor' since it isn't a known native property (" <th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr [ERROR ->]*ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j=ind"): Home@19:16
Can't bind to 'ngForD' since it isn't a known native property (" <th *ngFor="let label of lineChartLabels"></th>
</tr>
<tr [ERROR ->]*ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j=ind"): Home@19:16
Property binding ngFor not used by any directive on an embedded template ("
<th *ngFor="let label of lineChartLabels"></th>
</tr>
[ERROR ->]<tr *ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j"): Home@19:12
Property binding ngForD not used by any directive on an embedded template ("
<th *ngFor="let label of lineChartLabels"></th>
</tr>
[ERROR ->]<tr *ngFor="let d of lineChartData">
<td *ngFor="let label of lineChartLabels; let j"): Home@19:12 ; Zone: angular ; Task: Promise.then ; Value: BaseException {message: "Template parse errors:↵Can't bind to 'ngFor' since…let label of lineChartLabels; let j"): Home@19:12", stack: "Error: Template parse errors:↵Can't bind to 'ngFor…(http://localhost:5000/vendor.bundle.js:14518:42)"}