Question

我会将此库on 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,
    ...
  }
});

这是我执行的步骤

我已在angular.json下的build中添加了js文件

scripts": [ "src/assets/scripts/Chart.roundedBarCharts.js" ]
将cornerRadius: 20添加到图形选项
重新启动应用。

我收到一个错误，它无法识别新选项：

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

我以为我没有将js文件导入Angular应用

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的属性

将js文件集成到Anuglar

1 个答案: