chart.js - Поставляемые параметры не соответствуют какой-либо сигнатуре целевого вызова (angular2)

Question

Я использую chart.js version 2.2.1 в своем приложении angular 2.

При вызове конструктора Chart отображается ошибка:
Supplied parameters do not match any signature of call target. И команда npm start не скомпилирует приложение.

var myChart = new Chart(ctx, { 
    type: this.chartType, 
    data: chartData, 
    options: chartOptions 
}); 

Используя приведенный выше метод, диаграмма нарисована в браузере.
(Но я должен: 1) комментарий код, который создает таблицу, 2) запустить npm start, 3) раскомментировать код)

Я переустановил TypeScript Definitions (d.ts) for chartjs

В chart.d.ts что подпись 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; 
    } 
}; 

Согласно этому определению машинописи я должен создать таблицу таким образом:

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

Призывая таким образом экземпляр Chart не содержит функцию Line(/*...*/).

Как исправить проблему?

Я установил типизации для chart.js как предложено здесь: https://www.nuget.org/packages/chartjs.TypeScript.DefinitelyTyped/

Answer 1

Чтобы решить эту проблему, перечисленный в вопросе:

---

Q:
Когда вызова конструктора На диаграмме отображается сообщение об ошибке:

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

• И npm start команда не компилирует приложение.

---

для установки (angular2-rc4, chart.js-2.2.1),
В компоненте, где Chart создаетса объявить глобальную переменную Диаграммы: declare var Chart: any;

Целый код приведен ниже:

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