如何为ngx-charts-pie-chart的图例项添加跳转链接？

ngx-charts的默认图例不会解析HTML内容，所以直接在name字段里加链接标签只会显示纯文本，没法实现跳转需求。下面给你可行的实现方案，推荐自定义图例模板的方式，灵活可控：

方案：自定义图例模板绑定点击事件 #

通过自定义图例模板，完全控制图例项的渲染逻辑，给每个图例项添加点击事件，触发页面跳转并携带筛选参数。

1. 修改HTML模板 #

给ngx-charts-pie-chart添加自定义图例的<ng-template>：

<ngx-charts-pie-chart 
  *fuseIfOnDom 
  (select)="onSelect($event)" 
  [scheme]="chartOrderState.scheme" 
  [results]="chartOrderState.analytics" 
  [doughnut]="true" 
  [legend]="true" 
  [legendPosition]="below" 
  [legendTitle]="' '"
>
  <!-- 自定义图例项模板 -->
  <ng-template #legendTemplate let-item="item" let-index="index">
    <div class="legend-item" (click)="onLegendClick(item)">
      <span class="legend-color" [style.backgroundColor]="chartOrderState.scheme.domain[index]"></span>
      <span class="legend-label">{{ item.name }}</span>
    </div>
  </ng-template>
</ngx-charts-pie-chart>

2. 添加图例样式（可选） #

给图例项加样式，提示用户可点击：

.legend-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: 4px 0;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 8px;
}

3. 修改TS逻辑 #

注入Router，添加点击事件处理方法，统一跳转逻辑：

import { Router } from '@angular/router';

// 构造函数注入Router
constructor(
  private router: Router,
  private orderService: OrderService,
  private translateService: TranslateService,
  private appResponseHandler: AppResponseHandler
) {}

// 原有的populateOrderStateAnalytics方法保持不变

onSelect(data): void {
  // 饼图扇区点击也触发跳转
  this.navigateToOrderList(data);
}

onLegendClick(item): void {
  // 图例项点击触发跳转
  this.navigateToOrderList(item);
}

private navigateToOrderList(item): void {
  // 跳转到订单列表页，携带状态筛选参数
  this.router.navigate(['/orders'], {
    queryParams: { state: item.stateId }
  });
}

订单列表页配合逻辑 #

订单列表页需要监听路由查询参数，拿到筛选条件后加载对应订单：

// 订单列表组件示例
import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {
  this.route.queryParams.subscribe(params => {
    const stateId = params['state'];
    if (stateId) {
      // 根据stateId筛选订单
      this.loadOrdersByState(stateId);
    } else {
      // 加载全部订单
      this.loadAllOrders();
    }
  });
}

内容的提问来源于stack exchange，提问作者laurarana