無法綁定到“數據集”，因為它不是“畫布”的已知屬性

Question

這是我的 app.module.ts 我嘗試使用ng2-charts教程

import { ChartsModule } from 'ng2-charts';
imports: [
 ChartsModule
],

這是我的 html 代碼 page.html，我從教程中復制並粘貼

< div >
 < div style = "display: block" >
  < canvas baseChart
    [datasets] = "barChartData"
    [labels] = "barChartLabels"
    [options] = "barChartOptions"
    [legend] = "barChartLegend"
    [chartType] = "barChartType"
    (chartHover) = "chartHovered($event)"
    (chartClick) = "chartClicked($event)" > 
   < /canvas>
 </ div >
 < button (click) = "randomize()" > Update < /button>
</ div >

這是我的打字稿頁面，我也從教程中復制和粘貼。 頁面.ts

public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true};

public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public barChartType:string = 'bar';
public barChartLegend:boolean = true;

public barChartData:any[] = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
  ];

  // events
public chartClicked(e:any):void {
    console.log(e);
  }

public chartHovered(e:any):void {
    console.log(e);
  }

public randomize():void {
    // Only Change 3 values
    let data = [
      Math.round(Math.random() * 100),
      59,
      80,
      (Math.random() * 100),
      56,
      (Math.random() * 100),
      40];
    let clone = JSON.parse(JSON.stringify(this.barChartData));
    clone[0].data = data;
    this.barChartData = clone;
  }

我嘗試了所有教程和示例，但我不知道會發生什么。 我收到這個錯誤。 錯誤詳情是：

**Error: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("
          <div style="display: block">
            <canvas baseChart
                    [ERROR ->][datasets]="barChartData"
                    [labels]="barChartLabels"
                    [options]"): ng:///StatsPageModule/StatsPage.html@33:20
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
            <canvas baseChart
                    [datasets]="barChartData"
                    [ERROR ->][labels]="barChartLabels"
                    [options]="barChartOptions"
                    [legend"): ng:///StatsPageModule/StatsPage.html@34:20
Can't bind to 'options' since it isn't a known property of 'canvas'. ("        [datasets]="barChartData"
                    [labels]="barChartLabels"
                    [ERROR ->][options]="barChartOptions"
                    [legend]="barChartLegend"
                    [chartT"): ng:///StatsPageModule/StatsPage.html@35:20
Can't bind to 'legend' since it isn't a known property of 'canvas'. ("      [labels]="barChartLabels"
                    [options]="barChartOptions"
                    [ERROR ->][legend]="barChartLegend"
                    [chartType]="barChartType"
                    (chartHo"): ng:///StatsPageModule/StatsPage.html@36:20
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("      [options]="barChartOptions"
                    [legend]="barChartLegend"
                    [ERROR ->][chartType]="barChartType"
                    (chartHover)="chartHovered($event)"
                  "): ng:///StatsPageModule/StatsPage.html@37:20**

我只想制作一個圖表，顯示一周內創建的用戶數量和帖子數量，但是我遵循的每個教程都會出錯，無一例外，抱歉，如果您有拼寫錯誤，我的英語不是母語。

Answer 1

這是 Angular 和 ng2-charts 版本之間的沖突使用 Angular 7.2.0，我卸載了 ng2-charts 並安裝了 ng2-charts@2.2.3

這是有幫助的。 了解更多信息。 見： https : //github.com/valor-software/ng2-charts/issues/1115

Answer 2

使用 Highcharts 在 Ionic 應用程序中設置圖表

為離子安裝 Highcharts：

 npm install highcharts –save

打開文件./src/pages/home/home.html並用這樣的 div 替換 ion-content 標簽內的所有內容。

<div id="container" style="display: block;" ></div>

這個 div 是一個容器來保存圖表。 我在home.ts文件中編寫代碼。 home.html和home.ts是負責在應用程序中創建主頁的文件。 在 home.ts 中，首先導入highcharts模塊。

import * as HighCharts from 'highcharts';

接下來，在HomePage類中創建一個名為ionViewDidLoad()的函數，就在構造函數之后。 該文件應如下所示：

import {
  Component
} from '@angular/core';
import {
  NavController
} from 'ionic-angular';
import * as HighCharts from 'highcharts';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {}
}

ionViewDidLoad是一個特殊的函數，它在 View 初始化和加載后執行； 這確保避免在視圖中訪問組件期間出現任何錯誤。 在ionViewDidLoad 中創建一個新的HighCharts.chart對象：

var myChart = HighCharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Fruit Consumption'
  },
  xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges']
  },
  yAxis: {
    title: {
      text: 'Fruit eaten'
    }
  },
  series: [{
    name: 'Jane',
    data: [1, 0, 4]
  }, {
    name: 'John',
    data: [5, 7, 3]
  }]
});

保存文件，並在終端中輸入ionic serve –l以實驗室模式在瀏覽器中運行應用程序。 該應用程序應如下所示：