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