Интеграция JS-файла в Anuglar

Question

Я бы интегрировал эту библиотеку на github в моем проекте Angular, который добавляет новую опцию к моему графику chartJS

@ViewChild('myChart') myChart: ElementRef;
myChartBis: Chart;
....
....

const ctx = this.myChart.nativeElement.getContext('2d');
this.myChartBis = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: this.labels,
    datasets: [{
      label: 'test',
      showLine: true,
      lineTension: 0,
      data: this.data,
      fill: false,
      pointBorderColor: '#cd0037',
      pointBackgroundColor: '#ffffff',
      borderColor: [
        '#747678',
      ],
      borderWidth: 0
    }
    ],
  },
  options: {
    showLines: true,
    legend: {
      display: false,
    },
    responsive: true,
    maintainAspectRatio: true,
    cornerRadius: 20,
    ...
  }
});

Вот шаги, которые я сделал

1. Я добавил файл js в angular.json в build

   scripts": [ "src/assets/scripts/Chart.roundedBarCharts.js" ]

2. добавление cornerRadius: 20 в параметры графика

3. перезапустите приложение.

Я получаю сообщение об ошибке, что он не распознает новую опцию:

Type '{ showLines: true; legend: { display: false; }; responsive: true; maintainAspectRatio: true; corn...' is not assignable to type 'ChartOptions'.

Я догадываюсь, что я плохо импортировал файл jsв угловое приложение

Answer 1

Ваши параметры должны соответствовать интерфейсу ChartOptions (см. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/chart.js/index.d.ts)

    interface ChartOptions {
        responsive?: boolean;
        responsiveAnimationDuration?: number;
        aspectRatio?: number;
        maintainAspectRatio?: boolean;
        events?: string[];
        legendCallback?(chart: Chart): string;
        onHover?(this: Chart, event: MouseEvent, activeElements: Array<{}>): any;
        onClick?(event?: MouseEvent, activeElements?: Array<{}>): any;
        onResize?(this: Chart, newSize: ChartSize): void;
        title?: ChartTitleOptions;
        legend?: ChartLegendOptions;
        tooltips?: ChartTooltipOptions;
        hover?: ChartHoverOptions;
        animation?: ChartAnimationOptions;
        elements?: ChartElementsOptions;
        layout?: ChartLayoutOptions;
        scales?: ChartScales;
        showLines?: boolean;
        spanGaps?: boolean;
        cutoutPercentage?: number;
        circumference?: number;
        rotation?: number;
        devicePixelRatio?: number;
        plugins?: ChartPluginsOptions;
    }

Я не вижу весь объект, но по крайней мере conrnerRadius не является свойством ChartOptions