关于javascript：无法绑定到”数据集”，因为它不是”画布”的已知属性


Can't bind to 'datasets' since it isn't a known property of 'canvas'

这是我的app.module.ts
我尝试使用ng2-charts

的教程

1
2
3
4
import { ChartsModule } from 'ng2-charts';
imports: [
 ChartsModule
],

这是我的html代码page.html，我从教程中复制并粘贴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< 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 >

这也是我的typescript页面，也是我从教程中复制并粘贴的页面。 page.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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;
  }

我尝试了所有教程和示例，但我不知道会发生什么。
我得到这个错误。
错误详细信息是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
**Error: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("
         
            <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**

我只想制作一张图表，说明一周内创建的用户数和帖子数，但是我遵循的每个教程都会出错，所有这些都无一例外，对不起，如果您有英语，我的英语不是母语拼写错误。

相关讨论

这是Angular和ng2-charts版本之间的冲突
使用Angular 7.2.0时，我卸载了ng2-charts并安装了[email protected]

这有帮助。有关更多信息。看：
https://github.com/valor-software/ng2-charts/issues/1115

使用Highcharts在Ionic App中设置图表

为离子性安装Highcharts：

1
 npm install highcharts a€"save

打开文件./src/pages/home/home.html
并用这样的div替换离子含量标签内的所有内容。

1
 

此div是用于保存图表的容器。我将代码写在home.ts文件中。 home.html和home.ts是负责在应用程序中创建主页的文件。
在home.ts的顶部，首先导入highcharts模块。

1
import * as HighCharts from 'highcharts';

接下来，在构造函数之后，在HomePage类内创建一个名为ionViewDidLoad()的函数。该文件应如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 a€"l以在实验室模式下在浏览器中运行该应用程序。该应用程序应如下所示：

enter