Angular 如何将Chart.js与Typescript一起使用而不产生可分配的错误？

我正试图在我的Angular应用程序中使用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接口，否则它只会抓住第一个选项

---

希望这对您有所帮助：）

您能否发布有关如何导入的完整组件代码chartjs@Sajeetharan，将*作为图表从“Chart.js”导入；我有完全相同的问题这里有一个问题，任何人都可以解决这个问题。我不能建造我的房子project@IvoBogoevski，我无法解决，因此我暂时删除了类型定义依赖项。似乎将所有内容更新为最新版本后，错误就解决了。这里不需要导入LinearTickOptions。