Question

我想在单击BarChart中的一个栏时打开一个Dialog（MatDialog）。我该如何实施？

我已经用一个对话框示例尝试过，但是我无法使它正常工作。

my-bar-chart.component.ts

import { Component, OnInit } from '@angular/core';
import { BarChartService } from '../bar-chart.service';
import { barChartClass } from '../barChartClass';



@Component({
  selector: 'app-my-bar-chart',
  templateUrl: './my-bar-chart.component.html',
  styleUrls: ['./my-bar-chart.component.css']
})
export class MyBarChartComponent implements OnInit {

  constructor(private barChartService: BarChartService) {}
  //First BarChart
  barChart: barChartClass;
  public barChartLabels: any;
  public barChartType: any;
  public barChartLegend: any;
  public barChartData: any;
  //Second BarChart
  barChart2: barChartClass;
  public barChartLabels2: any;
  public barChartType2: any;
  public barChartLegend2: any;
  public barChartData2: any;

  getBarChart(): void {
    this.barChartService.getMockBarChart().subscribe(
      barChart => this.barChart = barChart
    );
    this.barChartData = this.barChart.barChartData;
    this.barChartLabels = this.barChart.barChartLabels;
    this.barChartType = this.barChart.barChartType;
    this.barChartLegend = this.barChart.barChartLegend;
  }
  getBarChart2(): void {
    this.barChartService.getMockBarChart2().subscribe(
      barChart => this.barChart2 = barChart
    );
    this.barChartData2 = this.barChart2.barChartData;
    this.barChartLabels2 = this.barChart2.barChartLabels;
    this.barChartType2 = this.barChart2.barChartType;
    this.barChartLegend2 = this.barChart2.barChartLegend;
  }

//onClick gets something like clickedItem or something!!

  public barChartOptions = {
    scaleShowVerticalLines: false,
    responsive: true,
    events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
    onHover: console.log('ttt'),
    onClick : function (evt, item) {
      alert('test');
    },
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        },
    legend: {
      display: true,
      position: 'right'
    },
    tooltips: {
      enabled: true,
      mode: 'point'
    }
  };

  ngOnInit() {
    this.getBarChart();
    this.getBarChart2();

  }
}

dialog-example.ts

import {Component, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';

export interface DialogData {
  animal: string;
  name: string;
}

/**
 * @title Dialog Overview
 */
@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html',
  styleUrls: ['dialog-overview-example.css'],
})
export class DialogOverviewExample {

  animal: string;
  name: string;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: {name: this.name, animal: this.animal}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

}

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

}

当我尝试在起始页中使用构造函数打开对话框时，出现“错误TypeError：无法读取未定义的属性'openDialog'”。

我想通过单击BarChart中的一个条形打开一个对话框并将数据发送给它。例如，一个带有学校课程的条形图，如果您单击一个条，然后打开与所单击的班级中的每个学生都有一个对话框。

谢谢。

我现在可以在与图表相同的页面中打开一个对话框，但只能使用一个按钮。如何通过图表中的onClick事件调用组件的（打字稿）功能？

Answer 1

所以一段时间后，我想通了。

import { Component, OnInit, Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { BarChartService } from '../bar-chart.service';
import { barChartClass } from '../barChartClass';

@Component({
  selector: 'app-my-bar-dialog',
  templateUrl: './my-bar-dialog.component.html',
  styleUrls: ['./my-bar-dialog.component.css']
})
export class MyBarDialogComponent implements OnInit {

  client: string;
  tenant: string;

  constructor(public dialog: MatDialog, private barChartService: BarChartService) { }

  //First BarChart
  barChart: barChartClass;
  public barChartLabels: any;
  public barChartType: any;
  public barChartLegend: any;
  public barChartData: any;

  getBarChart(): void {
    this.barChartService.getMockBarChart().subscribe(
      barChart => this.barChart = barChart
    );
    this.barChartData = this.barChart.barChartData;
    this.barChartLabels = this.barChart.barChartLabels;
    this.barChartType = this.barChart.barChartType;
    this.barChartLegend = this.barChart.barChartLegend;
  }

  public barChartOptions = {
    scaleShowVerticalLines: false,
    responsive: true,
    events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
    onHover: console.log('ttt'),
    onClick : () => {
      this.openDialog();

    },
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    },
    legend: {
      display: true,
      position: 'right'
    },
    tooltips: {
      enabled: true,
      mode: 'point'
    }
  };

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogData, {
      width: '250px',
      data: {client: this.client, tenant: this.tenant}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.client = result;
    });
  }
  ngOnInit() {
    this.getBarChart();
  }
}

@Component({
  selector: 'dialog-data',
  templateUrl: 'dialog-data.html',
  styleUrls: ['dialog-data.css']
})
export class DialogData {

  constructor(
    public dialogRef: MatDialogRef<DialogData>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

}

如果还有其他问题，可以问我。

如何单击“条形图”中的条形打开对话框？

1 个答案: