ng2-chartjs2 ignoriert Typ und zeigt immer ein Balkendiagramm

Question

Ich benutze angular2 mit ng2-chartjs2. Ich habe die folgende Komponente und Vorlage, die ich direkt von https://www.npmjs.com/package/ng2-chartjs2 genommen habe. Das Diagramm wird zwar gut angezeigt, aber wenn ich den Typ in der Vorlage von Zeile zu Zeile ändere, sehe ich immer noch das gleiche Balkendiagramm ohne Fehler.

import { Component } from '@angular/core'; 
import { Router, RouterLink, CanActivate } from '@angular/router'; 
import { CORE_DIRECTIVES } from '@angular/common'; 
import { DashboardLayoutComponent } from '../dashboard_layout/dashboard_layout.component'; 
import {ChartComponent, Chart} from 'ng2-chartjs2'; 


@Component({ 
    selector: 'home', 
    templateUrl: 'client/components/home/home.component.html', 
    directives: [DashboardLayoutComponent, CORE_DIRECTIVES, ChartComponent] 
}) 

export class HomeComponent { 

    constructor(private _router: Router) { 
    } 

    labels: string[] = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]; 
    data: Chart.Dataset[] = [ 
     { 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 25, 3], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     } 
    ]; 
} 

Vorlage:

<!-- template --> 
<dashboard-layout pageTitle="Statistical Overview"> 
    <div class="home"> 

<chart [labels]="labels" [data]="data" type="line"></chart> 

    </div> 
</dashboard-layout> 

Es scheint, wie ich die Dokumentation richtig folgende bin. Ist das ein Fehler? Gibt es einen Workaround?

Answer 1

Blick auf die source code

if(!this.options){ 
    this.options = { 
    type: 'bar', <== this line 
    data: { 
     labels: this.labels, 
     datasets: this.data 
    } 
    } 
} 

diese Weise, wenn Sie nicht bieten options wird es immer sein als bar Chart

Sie die folgende Abhilfe nutzen können:

import { ChartComponent } from 'ng2-chartjs2'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <chart [options]="options"></chart> 
    `, 
    directives: [ChartComponent] 
}) 
export class AppComponent { 
    options = { 
    type: 'line', 
    data: { 
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
      datasets: [ 
      { 
       label: '# of Votes', 
       data: [12, 19, 3, 5, 25, 3], 
       backgroundColor: [ 
        'rgba(255, 99, 132, 0.2)', 
        'rgba(54, 162, 235, 0.2)', 
        'rgba(255, 206, 86, 0.2)', 
        'rgba(75, 192, 192, 0.2)', 
        'rgba(153, 102, 255, 0.2)', 
        'rgba(255, 159, 64, 0.2)' 
       ], 
       borderColor: [ 
        'rgba(255,99,132,1)', 
        'rgba(54, 162, 235, 1)', 
        'rgba(255, 206, 86, 1)', 
        'rgba(75, 192, 192, 1)', 
        'rgba(153, 102, 255, 1)', 
        'rgba(255, 159, 64, 1)' 
       ], 
       borderWidth: 1 
      } 
     ] 
    } 
    }; 
} 

Demo Plunker