chart.js - 提供的参数不匹配呼叫目标的任何签名(angular2)
问题描述:
我在我的angular 2
应用程序中使用chart.js version 2.2.1
。chart.js - 提供的参数不匹配呼叫目标的任何签名(angular2)
当调用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/
答
要解决的问题中列出的问题:
问:
当调用构造函数图表显示一个错误:
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 });
}
}