ngx-charts无点击事件时隐藏手型指针的技术实现问询

针对你遇到的ngx-charts饼图默认手型指针误导用户，且需要区分有/无点击事件图表指针样式的问题，推荐以下精准可控的解决方案：

实现步骤 #

1. 全局重置默认指针样式
   在styles.scss中添加基础样式，把所有饼图的弧块默认设为箭头指针：

.ngx-charts .arc {
  cursor: default;
}

2. 给有点击需求的图表标记自定义类
   在模板中，给需要保留手型指针（绑定了点击事件）的饼图组件添加自定义类，比如chart-clickable：

<!-- 有点击跳转的饼图 -->
<ngx-charts-pie-chart
  class="chart-clickable"
  [results]="clickableData"
  (select)="handleChartClick($event)"
></ngx-charts-pie-chart>

<!-- 无点击的饼图 -->
<ngx-charts-pie-chart
  [results]="nonClickableData"
></ngx-charts-pie-chart>

3. 给标记类的图表恢复手型指针
   回到styles.scss，添加针对自定义类的样式，覆盖默认设置：

.chart-clickable .ngx-charts .arc {
  cursor: pointer;
}

方案优势 #

• 无需修改node_modules中的库文件，避免后续维护冲突；
• 不会全局影响所有图表，仅对标记了自定义类的图表生效；
• 无需手动操作深层DOM元素，仅通过组件根类+CSS后代选择器即可精准命中目标元素，操作简单。

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