在 ngx-charts-pie-chart 中添加图例项的链接？

Question

我使用 ngx-charts-pie-chart 实现了一个饼图。此图表显示有关电子商务网站中订单状态的统计信息。图例由 API 自动填充，其中包含订单状态以及每种状态的订单数量。实际上，它似乎有一个链接，但我不知道如何将真正的链接添加到我的订单列表中，并按图例中选择的订单状态进行过滤。

我在这里和谷歌上搜索了类似的内容，但似乎没有人需要通过单击图例标签来更改页面......

有人知道我该怎么做吗？

这是我的代码：

HTML：

<ngx-charts-pie-chart *fuseIfOnDom (select)="onSelect($event)" [scheme]="chartOrderState.scheme" [results]="chartOrderState.analytics" [doughnut]="true" [legend]="true" [legendPosition]="below" [legendTitle]="' '">
</ngx-charts-pie-chart>

TS：

  chartOrderState = {
    scheme: {
      domain: []
    },
    analytics: []
  };

  populateOrderStateAnalytics() {
    this.orderService.getOrderStateAnalitycs().subscribe(analytics => {
      analytics.map(analytic => {
        this.chartOrderState.analytics.push(
          {
            stateId: analytic.description,
            name: this.translateService.instant('OD_STATES.' + analytic.description) + ' - ' + analytic.percentage,
            value: analytic.percentage
          });
        this.chartOrderState.scheme.domain.push(
          analytic.color);
      });
      console.log('home.component: orderState:', analytics);
    }, err => {
      console.log('home.component: orderState:', err);
      this.appResponseHandler.failure(err);
    });
  }


  onSelect(data): void {
    // Here I would need to redirect to the Orders List page, filtering by Order Status
    console.log(data);
  }

我尝试修改 ChartOrderState.analytics 上的属性“name”，以添加 html 属性，但它不会将其转换为链接，并且我获得纯文本标签而不是链接。

有什么想法吗？

提前非常感谢。

Answer 1

距离我最初的帖子已经过去很长时间了，但我想分享我的最终解决方案。我创建了一个自定义组件来替换图例并管理目标页面的链接。这就是我的代码现在的样子：

定制组件：

HTML：

<div fxLayout="column">
    <ul class="legend-labels">
        <div *ngFor="let item of chartStockType.analytics; let i = index"
            [ngStyle]="{'width': width, 'height': height }" (click)="goToStocksFromGraph(item, i)"
            [attr.aria-label]="item.name + '-legend'" class="container ms-4 mb-4">
            <li class="legend-label">
                <span class="legend-label-color"
                    [ngStyle]="{'background-color': chartStockType.scheme.domain[i]}"></span>
                <span tabindex="-1" title="{{item.name}}"></span>
                <span class="legend-label-text" [style.color]="item[i]">{{item.name}}</span>
            </li>
        </div>
    </ul>
</div>

TS：

import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { Router } from '@angular/router';
import { StockStateManagementService } from 'app/rental/services/stock-state-management.service';

@Component({
  selector: 'app-custom-legend',
  templateUrl: './custom-legend.component.html',
  styleUrls: ['./custom-legend.component.scss']
})
export class CustomLegendComponent implements OnInit, OnChanges {

  @Input() chartStockType: any;
  @Input() height !: string;
  @Input() width !: string;
  @Input() dateFrom !: Date;
  @Input() dateTo !: Date;
  @Input() onTrueHoverEvent: Observable<void> = new Observable<void>();
  @Input() onFalseHoverEvent: Observable<void> = new Observable<void>();
  private trueEventSubscription !: Subscription;
  private falsEeventSubscription !: Subscription;

  myData: any;
  myDomain: any;
  constructor(
    private stockStateService: StockStateManagementService,
    private router: Router,
  ) { }

  ngOnInit(): void {
    this.heightWidthManipulate();
  }

  //used to detect hover events in the parent component
  ngOnChanges(changes: SimpleChanges): void {    
    if (changes) {
        this.unsubscribeRegisteredEvents();
      
        this.trueEventSubscription = this.onTrueHoverEvent.subscribe((hoveredElement) =>
        this.hoverLegendTrue(hoveredElement));
      
        this.falsEeventSubscription = this.onFalseHoverEvent.subscribe((hoveredFalseElement) =>
        this.hoverLegendFalse(hoveredFalseElement));
        
        if (changes.dateFrom) {
          this.dateFrom = changes.dateFrom.currentValue;
        }
        if (changes.dateTo) {
          this.dateTo = changes.dateTo.currentValue;
        }
    }
  }

  ngOnDestroy(): void {
    this.unsubscribeRegisteredEvents();
  }

  unsubscribeRegisteredEvents(): void {
    if (this.trueEventSubscription)
      this.trueEventSubscription.unsubscribe();

    if (this.falsEeventSubscription)
      this.falsEeventSubscription.unsubscribe();
  }

  //adding 'vmin' to the input string for html height and width property.
  heightWidthManipulate(): void {
    this.height = this.height + "vmin";
    this.width = this.width + "vmin";
  }

  //this function defines the UX changes on Hover.
  hoverLegendTrue(event: any): void {
    console.log("hoverLegendTrue");
    (document.querySelector('[aria-label="' + event.value.name + '-legend"]') as HTMLElement).style.backgroundColor = 'orange';
  }

  hoverLegendFalse(FalseEvent: any): void {
    (document.querySelector('[aria-label="' + FalseEvent.value.name + '-legend"]') as HTMLElement).style.backgroundColor = 'rgb(251, 251, 251)';
  }

  goToStocksFromGraph(item: any, i: number): void {    
    let advancedFilter = this.stockStateService.getAdvancedFilterProperties().advancedFilter;
    
    advancedFilter.startDate = new Date();
    advancedFilter.endDate = new Date();  
    advancedFilter.tugState = i + 1;
    advancedFilter.rentalAvailabilityStartDate = this.dateFrom;
    advancedFilter.rentalAvailabilityEndDate = this.dateTo;
    advancedFilter.stopAtManuport = false;
    advancedFilter.warrantyStartDateNotAvailable = false;
    advancedFilter.availableForRental = true;//item.description === '1' ? true : false;

    this.stockStateService.setAdvancedFilterProperties({
      advancedFilter: advancedFilter,
      caller: "CustomLegendComponent"
    });
    this.router.navigate([`./stock-management`]);
  }
}

来电者：

...
<div class="h-200" fxLayoutAlign="center center" *ngIf="chartStockType?.analytics?.length > 0">
    <ngx-charts-pie-chart *fuseIfOnDom [scheme]="chartStockType.scheme"
        [results]="chartStockType.analytics" [doughnut]="true" [legend]="false">
    </ngx-charts-pie-chart>
</div>
<div class="mt-50">
    <app-custom-legend [chartStockType]="chartStockType" [dateFrom]="filter.dateFrom"
        [dateTo]="filter.dateTo" [onTrueHoverEvent]="onHoverTrueEmitSubject"
        [onFalseHoverEvent]="onHoverFalseEmitSubject" [height]="'1'" [width]="'19'"
        *ngIf="chartStockType?.analytics?.length > 0">
    </app-custom-legend>
</div>
...

在这种模式下，我已经用我的自定义图例替换了原始图例，现在我可以根据我点击的图例语音来过滤目标页面中的数据。

希望这有帮助！ 😊