Блог

Главная - Вопросы по программированию - Chart.js в Ионном 5

Chart.js в Ионном 5

#ionic-framework

Вопрос:

я пытался использовать Chart.js в Ionic 5, посмотрев этот учебник (https://ichi.pro/es/ionic-5-charts-graphs-usando-la-biblioteca-chartjs-102145521332905) Но я получаю эту ошибку: введите описание изображения здесь

Код почти идентичен, за исключением имен файлов. Не совсем понимаю, почему это происходит, любая помощь приветствуется.

 import { Component, AfterViewInit, ViewChild , ElementRef } from '@angular/core';
import {Chart} from "chart.js";

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page implements AfterViewInit{
  @ViewChild('lineCanvas') private lineCanvas: ElementRef;

  lineChart: any;

  constructor() { }

  ngAfterViewInit() {
    this.lineChartMethod();
  }

  lineChartMethod() {
    this.lineChart = new Chart(this.lineCanvas.nativeElement, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'November', 'December'],
        datasets: [
          {
            label: 'Sell per week',
            fill: false,
            //lineTension: 0.1,
            backgroundColor: 'rgba(75,192,192,0.4)',
            borderColor: 'rgba(75,192,192,1)',
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: 'rgba(75,192,192,1)',
            pointBackgroundColor: '#fff',
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: 'rgba(75,192,192,1)',
            pointHoverBorderColor: 'rgba(220,220,220,1)',
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [65, 59, 80, 81, 56, 55, 40, 10, 5, 50, 10, 15],
            spanGaps: false,
          }
        ]
      }
    });
  }
}

Вот HTML-код

 <ion-content [fullscreen]="true">
   <div class="ion-padding">
    <ion-card>
      <ion-card-header>
        Line Chart
      </ion-card-header>
      <ion-card-content>
        <canvas #lineCanvas style="position: relative; height:20vh; width:40vw"></canvas>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>

Ответ №1:

Chart.js нужно зарегистрировать контроллер перед загрузкой данных,но какова бы ни была внутренняя механика, вот из chart.js документирует правильный способ инициализации диаграммы в машинописном виде :

Также доступен короткий формат регистрации, чтобы быстро зарегистрировать все.

импорт { График, регистрируемые данные } из ‘chart.js’; Диаграмма.регистр(…регистрируемые объекты);

И, наконец, есть отдельный путь, чтобы сделать для вас то же самое, что и выше, в одной строке:

импорт диаграммы из «chart.js/auto»;

источник :https://www.chartjs.org/docs/master/getting-started/integration.html

Ответ №2:

импорт { График, регистрируемые данные } из ‘chart.js’; Диаграмма.регистр(…регистрируемые объекты);

Просто положи это…

Метки: