無法綁定到“類型”，因為它不是 angular13 的“畫布”的已知屬性

Question

我現在在嘗試使用帶有 Angular 的免費 API 創建股票數據圖表時遇到問題。 問題出在帆布應答器上。 我正在使用 chart.js 和 ng2-charts。 我已經嘗試了很多解決方案，例如 NPM 安裝或模塊導入，但沒有任何幫助。

這是我總是發現的錯誤：

錯誤 NG8002：無法綁定到“chartType”，因為它不是“畫布”的已知屬性。 錯誤 NG8002：無法綁定到“chartType”，因為它不是“畫布”的已知屬性。 錯誤 NG8002：無法綁定到“數據集”，因為它不是“畫布”的已知屬性。

這是我的 HTML 代碼

<div class='card'>
  <div class='card-header'>
    {{title}}
  </div>
  <div class="card-body"><br />

    <input (change)="onChange($event)" (keyup)="onKeyup($event)" class="form-control" type="text"
      placeholder="Search..." list="searchresults" autofocus />
    <datalist id="searchresults">
      <option *ngFor="let i of searchResults" value="{{i.symbol | uppercase}}">{{i.name | titlecase}}</option>
    </datalist>

    <br />

    <div class="form-group row" id="timeframe">
      <label class="col-sm-6 col-form-label" for="timeframe">Timeframe:</label>
      <div class="col-sm-6">
        <select (change)="onTimeChange($event.target.value)" class="form-control form-control-sm" name="timeframe">
          <option id="{{timeframes[timeframe.id].id}}" value="{{timeframes[timeframe.id].timeframe}}"
            selected="{{timeframes[timeframe.id].selected}}" *ngFor="let timeframe of timeframes">
            {{timeframes[timeframe.id].label}}</option>
        </select>
      </div>
    </div>

    <br />

    <canvas
      baseChart
      [chartType]="'bar'"
      [datasets]="chartData"
      [options]="chartOptions"
      [legend]="chartLegend"
      [labels]="chartLabels">
    </canvas>

  </div>
</div>





<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

這是我的 ts 代碼：

import { Component, OnInit, NgModule } from '@angular/core';
import { FinanceServiceService } from 'src/app/services/finance-service.service';




@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})

export class DashboardComponent {
  title = 'ngFinance';
  searchResults = [];
  keyword: string = '';

  date$ = [];
  lineData$ = [];
  barData$ = [];
  dailyData = [];
  lineCount: number;

而且我在這里仍然有一些代碼，但只是不想使用這里的空間。

你可以在 app.modules.ts 上找到我的導入

...
import { ChartsModule } from 'ng2-charts';
...

Answer 1

您是否將 ChartsModule 放入 @NgMdule 導入表中？

...
import { NgChartsModule } from 'ng2-charts';
...
@NgModule({
  declarations: [
  ...
  ],
  imports: [
   ...
    NgChartsModule
  ],
  ...
})

另外，您使用的是哪個版本的 ng2-charts ans chart.js？

Answer 2

如果您可以分享，了解您正在使用的 ng2-charts 版本會有所幫助。

問題是什么 ？

在最新版本的圖表中，他們刪除了不同對象中的很多屬性，並且還更改了一些屬性名稱。 這是一個鏈接。

圖表配置官方文檔

解決方案：

在您的情況下，您想要定義圖表的類型。 您當前正在使用“chartType”。 但是新的屬性名稱是“類型”。 因此，您需要改用它：

  [type]="'line'"