chart.js - 提供的参数与调用目标的任何签名都不匹配(angular2) [英] chart.js - Supplied parameters do not match any signature of call target (angular2)

问题描述

我在 angular 2 应用程序中使用 chart.js 版本 2.2.1.

I am using chart.js version 2.2.1 in my angular 2 app.

调用Chart的构造函数时会报错:
提供的参数与调用目标的任何签名都不匹配.并且 npm start 命令不会编译应用程序.

When call the constructor of Chart an error is displayed:
Supplied parameters do not match any signature of call target. And npm start command does not compile the app.

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

通过上述方法，在浏览器中绘制图表.
(但我必须:1)注释创建 Chart 的代码，2)运行 npm start，3)取消注释代码)

By using the above method the chart is drawn in browser.
(But I have to: 1) comment the code which creates the Chart, 2) run npm start, 3) uncomment the code)

我已重新安装 chartjs 的 TypeScript Definitions (d.ts)

在 chart.d.ts 中是 Chart 的签名:

In chart.d.ts is that signature of 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;
    }
};

根据那个打字稿定义，我必须以这种方式创建图表:

According to that Typescript Definition I have to create the Chart in that way:

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

通过这种方式调用 Chart 实例不包含 Line(/*...*/) 函数.

By calling in this way the Chart instance does not contain Line(/*...*/) function.

我该如何解决这个问题?

How can I fix the problem?

我已经按照这里的建议为 chart.js 安装了类型:https://www.nuget.org/packages/chartjs.TypeScript.DefinitelyTyped/

推荐答案

解决问题中列出的问题:

To resolve the problem listed in question:

问:
调用Chart的构造函数时会报错:

• 提供的参数与调用目标的任何签名都不匹配.

并且 npm start 命令不会编译应用程序.

And npm start command does not compile the app.

对于设置(angular2-rc4，chart.js-2.2.1)，
在实例化 Chart 的组件中声明全局变量图表:declare var 图表:任意；

for the setup (angular2-rc4, chart.js-2.2.1),
In the component where the Chart is instantiated declare the global variable 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 });
    }  
}

这篇关于chart.js - 提供的参数与调用目标的任何签名都不匹配(angular2)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！