chart.js - Die mitgelieferten Parameter stimmen nicht mit einer Signatur des Aufrufziels überein (angular2)

Question

Ich verwende chart.js version 2.2.1 in meiner angular 2 App.

Wenn der Konstruktor von Chart ein Fehler rufen wird angezeigt:
Supplied parameters do not match any signature of call target. Und npm start Befehl kompiliert die App nicht.

Mit der oben genannten Methode wird das Diagramm im Browser gezeichnet.
(Aber ich muss: 1) den Code Kommentar, der die Diagramm ist, 2) laufen npm start, 3) Kommentar- der Code)

ich neu installiert haben TypeScript Definitions (d.ts) for chartjs

In chart.d.ts schafft, dass die Unterzeichnung des Chart:

interface Chart { 
    Line(data: LinearChartData, options?: LineChartOptions): LinearInstance; 
    Bar(data: LinearChartData, options?: BarChartOptions): LinearInstance; 
    Radar(data: LinearChartData, options?: RadarChartOptions): LinearInstance; 

    PolarArea(data: CircularChartData[], options?: PolarAreaChartOptions): CircularInstance; 
    Pie(data: CircularChartData[], options?: PieChartOptions): CircularInstance; 
    Doughnut(data: CircularChartData[], options?: PieChartOptions): CircularInstance; 
} 

declare var Chart: { 
    new (context: CanvasRenderingContext2D): Chart; 
    defaults: { 
     global: ChartSettings; 
    } 
}; 

nach dieser Definition Typoskript ich habe das Diagramm auf diese Weise zu erstellen:

var myChart = new Chart(ctx).Line(chartData, chartOptions); 

auf diese Weise durch den Aufruf der Chart Instanz nicht Line(/*...*/) Funktion enthält.

Wie kann ich das Problem beheben?

Ich habe Typisierungen für chart.js installiert wie hier vorgeschlagen wird: https://www.nuget.org/packages/chartjs.TypeScript.DefinitelyTyped/

Answer 1

das Problem bei der Frage zu beheben:

---

Q:
Wenn rufen Sie den Konstruktor Diagramm ein Fehler wird angezeigt:

• Supplied parameters do not match any signature of call target.

• Und npm start Befehl nicht kompiliert die App.

---

für das Setup (angular2-RC4, chart.js-2.2.1),
In der Komponente, wo die Chart instanziiert wird die globale Variable Diagramm erklären: declare var Chart: any;

Der gesamte Code ist unten:

import { Component, Input, Output, 
     EventEmitter, ElementRef, 
     Inject, AfterViewInit} from '@angular/core'; 


declare var Chart: any; //THIS LINE resolves the problem listed in question!!! 


@Component({ 
    selector: 'my-chart', 
    template: `<canvas height="{{chartHeight}}"></canvas>`, 
    styles: [`:host { display: block; }`] 
}) 

export class LinearChartDirective implements AfterViewInit { 
    @Input() chartData: Array<any>; 
    @Input() chartXAxisLabels: Array<any>; 

    @Input() showLegend: boolean; 
    @Input() legendLabel: string; 
    @Input() chartHeight: number; 

    chart: any; 

    constructor(@Inject(ElementRef) private element: ElementRef) { } 

    ngAfterViewInit() {   
     let context = this.element.nativeElement.children[0].getContext('2d'); 
     this.createChart(ctx); 
    } 

    createChart(ctx: CanvasRenderingContext2D) {  
     if(!this.chartData) 
      return; 

     let data = { 
      labels: this.chartXAxisLabels, 
      datasets: [{ 
       label: this.legendLabel, 
       data: this.chartData, 

       backgroundColor: ['rgba(54, 162, 235, 0.2)'], 
       borderColor: ['rgba(54, 162, 235, 1)'], 
       borderWidth: 1, 
       lineTension: 0, // set to 0 means - No bezier 

       pointBorderColor: "rgba(75,192,192,1)", 
       pointBackgroundColor: "#fff", 
       pointBorderWidth: 1, 
       pointHoverRadius: 5, 
       pointHoverBackgroundColor: "rgba(75,192,192,1)", 
       pointHoverBorderColor: "rgba(220,220,220,1)", 
       pointHoverBorderWidth: 2, 
       pointRadius: 2, 
       pointHitRadius: 10 
      }] 
     }; 

     let chartOptions = {   
      legend: { display: this.showLegend !== undefined ? this.showLegend : false }, 

      responsive: true, 
      maintainAspectRatio: true, 
      scales: { yAxes: [{ ticks: { beginAtZero: true } }] } 
     }; 

     //next line is no more complaining about "Supplied parameters..." 
     this.chart = new Chart(ctx, { type: 'line', data: data, options: chartOptions }); 
    } 
}