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

ng2-chartjs2忽略类型并始终显示条形图

1 个答案: