使用ngx-charts修改图例位置报TS2322类型不匹配错误如何解决

该TS类型错误的核心是传入的"below"不属于ngx-charts定义的LegendPosition枚举的允许取值范围，Angular 12适配的ngx-charts版本（通常为v19及以下）并未提供below这个可选值。

• 确认当前项目安装的ngx-charts版本对应的LegendPosition枚举合法值，Angular 12适配版本的合法取值仅为right、left、top、bottom四类
• 检查模板/TS代码中给legendPosition属性的赋值逻辑，确认是否误用了非官方定义的取值
• 若在TS文件中赋值，检查是否未引入LegendPosition枚举直接写了自定义字符串字面量

方案1：模板直接传合法字符串值 #

将原配置中的legendPosition="below"修改为legendPosition="bottom"即可，示例代码：

<ngx-charts-pie-chart
  [results]="pieData"
  [legend]="true"
  legendPosition="bottom"
  <!-- 其余配置项 -->
></ngx-charts-pie-chart>

方案2：TS中引入枚举后绑定变量 #

如果需要在组件类中动态控制图例位置，先引入枚举再赋值：

import { Component } from '@angular/core';
import { LegendPosition } from '@swimlane/ngx-charts';

@Component({
  selector: 'app-pie-chart-demo',
  templateUrl: './pie-chart-demo.component.html'
})
export class PieChartDemoComponent {
  public legendPosition: LegendPosition = LegendPosition.Bottom;
  // 其余业务逻辑
}

模板中绑定对应变量：

<ngx-charts-pie-chart
  [results]="pieData"
  [legend]="true"
  [legendPosition]="legendPosition"
></ngx-charts-pie-chart>

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