Невозможно привязать к наборам данных, так как это не известное свойство canvas

Question

это мой app.module.ts Я пытаюсь с учебником это ng2-диаграммы

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 >

это моя страница с машинописным текстом, также я копирую и вставляю из учебника. page.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

Настройка диаграммы в Ionic App с использованием Highcharts

Установка Highcharts for ionic:

 npm install highcharts –save

Открыть файл . /src / pages / home / home.html и замените все, что находится внутри тега ion-content, на div следующим образом:

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

Этот div является контейнером для хранения диаграммы.Я пишу код в home.ts файл. home.html и home.ts - это файлы, отвечающие за создание домашней страницы в приложении.Сначала в home.ts сначала импортируйте модуль highcharts .

import * as HighCharts from 'highcharts';

Затем создайте функцию с именем ionViewDidLoad () внутри класса HomePage , сразу после конструктора.Файл должен выглядеть следующим образом:

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 - это специальная функция, которая выполняется после инициализации и загрузки представления;это гарантирует, что во время доступа к компонентам в представлении не будет ошибок.Создайте новый HighCharts.chart объект в ionViewDidLoad :

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 для запуска приложения в браузере в лабораторном режиме.Приложение должно выглядеть так: