ng2-chartjs2忽略類型並始終顯示條形圖

Question

我正在使用angular2和ng2-chartjs2。我有我從https://www.npmjs.com/package/ng2-chartjs2直接採取以下組件和模板。圖表顯示正常，但是當我將模板中的類型從欄更改爲行時，仍然可以看到沒有錯誤的同一條形圖。

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

模板：

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

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

    </div> 
</dashboard-layout> 

好像我是正確遵循了文檔。這是一個錯誤？有沒有解決方法？

Answer 1

看那source code

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

這樣，如果你不提供options它總是會爲bar圖表

您可以利用以下解決方法：

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