ng2-charts 1）如何生成当前日期，当前年份，当前月份数据：2）如何将按钮与特定数据连接

Question

请帮助我：

1. 在 ng2-charts 中如何生成当前日期、当前年份、当前月份数据。不要手动编写它。
2. 如何将按钮与特定数据连接。 通过单击“日”、“月”、“年”按钮，我想获取当前日期、月份或年份的数据。
3. 如何从模拟中导入新数据。 提前谢谢你！

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

@Component({
  selector: 'app-usage1',
  templateUrl: './usage1.component.html',
  styleUrls: ['./usage1.component.scss']
})
export class Usage1Component {
  private newLabel?= 'New label';
  currentYear: number = new Date().getFullYear();
  building?: Object;
  electricMeters: String[];
  gasMeters: String[];
  activeMeters: String[];
  timePreference: String;
  pickedDate: Date;
  data: NewAPIResult;
  showTemperature: Boolean;
  customDatasets: any;

  constructor(public buildingService: BuildingService, public helpersService: HelpersService){
    this.data = dataDay;
    this.building = this.buildingService.selectedBuilding;
    this.activeMeters = [ '871689290601657889' ];
    this.electricMeters = [ '871689290601657889' ];
    this.gasMeters = [];
    this.timePreference = 'day';
    this.pickedDate = new Date();
    this.showTemperature = true;
    this.customDatasets = [];
  }
  public lineChartData: ChartConfiguration['data'] = {
    datasets: [
      {
        data: [65, 59, 80, 81, 56, 55, 40],
        label: 'Series A',
        backgroundColor: 'rgba(148,159,177,0.2)',
        borderColor: 'rgba(148,159,177,1)',
        pointBackgroundColor: 'rgba(148,159,177,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(148,159,177,0.8)',
        fill: 'origin',
      },
      {
        data: [28, 48, 40, 19, 86, 27, 90],
        label: 'Series B',
        backgroundColor: 'rgba(77,83,96,0.2)',
        borderColor: 'rgba(77,83,96,1)',
        pointBackgroundColor: 'rgba(77,83,96,1)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgba(77,83,96,1)',
        fill: 'origin',
      },
     
     
    ],
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
  };

  public lineChartOptions: ChartConfiguration['options'] = {
    elements: {
      line: {
        tension: 0.5
      }
    },
    scales: {
      // We use this empty structure as a placeholder for dynamic theming.
      y:
      {
        position: 'left',
      },
      y1: {
        position: 'right',
        grid: {
          color: 'rgba(255,0,0,0.3)',
        },
        ticks: {
          color: 'red'
        }
      }
    },


  };

  public lineChartType: ChartType = 'line';

  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;



  // events
  public chartClicked({ event, active }: { event?: ChartEvent, active?: {}[] }): void {
    console.log(event, active);
  }

  public chartHovered({ event, active }: { event?: ChartEvent, active?: {}[] }): void {
    console.log(event, active);
  }

  public hideOne(): void {
    const isHidden = this.chart?.isDatasetHidden(1);
    this.chart?.hideDataset(1, !isHidden);
  }

<canvas baseChart class="chart" width="40" height="10" value="currentYear"
        [data]="lineChartData"
        [options]="lineChartOptions"
        [type]="lineChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"></canvas>