如何将日期放入 charjs Angular 17 中？

Question

我对 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 轴上显示日期？ 我已经尝试过文档，但没有找到符合我要求的示例

Answer 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 演示