angular - 如何将Chart.js与Typescript一起使用而不会出现可分配的错误？

我试图在我的角度应用程序中将library chart.js与typescript一起使用，但出现以下错误：

Error: Object literal may only specify known properties, and 'stepSize' does not exist in type 'TickOptions'.

查看TickOptions接口时，该属性实际上并不存在，但它位于扩展TickOptions的另一个接口上，即接口LinearTickOptions：

interface LinearTickOptions extends TickOptions {
    maxTicksLimit?: number;
    stepSize?: number;
    suggestedMin?: number;
    suggestedMax?: number;
}

如何使typescript查找LinearTickOptions接口而不是TickOptions？
这是显示错误的代码：

new Chart(this.clientsPerMonthElement.nativeElement, {
  type: 'line',
  data: {
    labels,
    datasets: [{
      data,
      label: 'Clientes no mês',
      backgroundColor: 'transparent',
      borderColor: lineColor,
      borderWidth: 2,
      pointBackgroundColor: lineColor,
      pointRadius: 4,
    }],
  },
  options: {
    legend: {
      display: false,
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          stepSize: 1, // I'm getting an error here
        },
      }],
    },
  },
});

最佳答案

有同样的问题但我找到了解决办法
您还需要从“chart.js”导入LinearTickOptions。

import { Chart, LinearTickOptions } from 'chart.js';

然后需要创建一个变量来保存这些信息

xAxisTickOptions: LinearTickOptions = {
  min: 0,
  stepSize: 0.02,
};

如果使用具有不同步长值的x和y，则需要分离变量（显然）
从那里我们可以直接引用options对象中的变量

xAxes: [
       {
         type: 'linear', //optional
         ticks: this.xAxisTickOptions,
         ...
        }
      ]

一切都应该从那里解决。我对这个原因的最佳猜测是因为轴实现TickOptions | LinearTickOptions | ...。所以它只会抓住第一个选项，除非您想在tick对象中实现整个lineartickoptions接口
希望这有帮助：）

关于angular - 如何将Chart.js与Typescript一起使用而不会出现可分配的错误？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51461457/