Как поставить даты в charjs angular 17?

Я новичок в angular, у меня в компоненте есть этот код:

import { Component, inject, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import Chart from 'chart.js/auto';

@Component({
  selector: 'app-chart',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './chart.component.html',
  styleUrl: './chart.component.css'
})
export class ChartComponent {
  title = 'ng-chart';
  chart: any = [];

  constructor() {}

  ngOnInit() {
    this.chart = new Chart('canvas', {
      type: 'scatter',
      data: {
        labels: ["2010-01-02 05:06:07","2010-01-03 05:06:07","2010-01-04 05:06:07","2010-01-05 05:06:07"],
        datasets: [{
          label: 'Transactions',
          data: [{
            x: "2010-01-01 05:06:07",
            y: 10
          }, {
            x: "2010-01-02 05:06:07",
            y: 5
          }, {
            x: "2010-01-03 05:06:07",
            y: 5.5
          }],
          backgroundColor: 'rgb(255, 99, 132)'
        },{
        data: [{
          x: "2010-01-04 05:06:07",
          y: 7
        }, {
          x: "2010-01-05 05:06:07",
          y: 7
        }, {
          x: "2010-01-06 05:06:07",
          y: 6.5
        }],
        backgroundColor: 'rgb(125, 99, 132)'
        }],
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          },
          x:{
            type: 'time'
          }
        }
      },
    });
  }
}

но он ничего не показывает: если я поставлю type: 'linear' на тип x, он покажет мне график с 0 в качестве начальной точки в x и 1 в качестве последнего элемента. Как я могу иметь даты по осям X? Я пробовал использовать документацию, но не нашел примера, соответствующего моим требованиям.

На данный момент я не могу это одобрить, но введенные вами даты — это всего лишь строки. Возможно, чтоchart.js не сможет интерпретировать строки как даты. Попробуйте использовать тип даты или метки времени. Если даты отображаются неправильно, вы сможете каким-то образом преобразовать данные. Я с телефона, поэтому не могу проверить, как это сделать правильно.

— 20.02.2024 23:05

angular chart.js angular17

20.02.2024 20:33

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

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

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

552

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Возможно, вам придется импортировать chartjs-adapter-moment, чтобы он начал работать, сначала я установил с помощью

npm install moment chartjs-adapter-moment --save

Затем я добавил импорт, как показано ниже!

import 'chartjs-adapter-moment';

Затем, наконец, я переключился на дочернее представление для ссылки на холст, и это сработало отлично!

полный код

import { Component, ElementRef, ViewChild } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import Chart from 'chart.js/auto';
import 'zone.js';
import 'chartjs-adapter-moment';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <canvas #canvas></canvas>
  `,
})
export class App {
  @ViewChild('canvas') canvas!: ElementRef<any>;
  title = 'ng-chart';
  chart: any = [];

  constructor() {}

  ngAfterViewInit() {
    this.chart = new Chart(this.canvas.nativeElement, {
      type: 'scatter',
      data: {
        labels: [
          '2010-01-02 05:06:07',
          '2010-01-03 05:06:07',
          '2010-01-04 05:06:07',
          '2010-01-05 05:06:07',
        ],
        datasets: [
          {
            label: 'Transactions',
            data: [
              {
                x: '2010-01-01 05:06:07',
                y: 10,
              },
              {
                x: '2010-01-02 05:06:07',
                y: 5,
              },
              {
                x: '2010-01-03 05:06:07',
                y: 5.5,
              },
            ],
            backgroundColor: 'rgb(255, 99, 132)',
          },
          {
            data: [
              {
                x: '2010-01-04 05:06:07',
                y: 7,
              },
              {
                x: '2010-01-05 05:06:07',
                y: 7,
              },
              {
                x: '2010-01-06 05:06:07',
                y: 6.5,
              },
            ],
            backgroundColor: 'rgb(125, 99, 132)',
          },
        ],
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
          },
          x: {
            type: 'time',
          },
        },
      },
    });
  }
}

bootstrapApplication(App);

Демо-версия Stackblitz

21.02.2024 05:44