如何在Angular项目中移除FusionChart的追踪水印？

问题场景 #

当前项目中使用FusionChart的组件代码如下：

<fusioncharts class="fusion_chart" [dataSource]="dataSource"></fusioncharts>

尝试通过CSS隐藏水印但未生效，所用CSS代码：

g[class$="creditgroup"] {
  display: none !important;
}
g[class^="raphael-group-"][class$="-creditgroup"] {
  display: none !important;
}
svg > g[class^="raphael-group-"] > text {
  display: none;
}
[pointer-events="bounding-box"] {
  display: none;
}
svg > g[class^="raphael-group-"] g {
  fill: none !important;
}

可行解决方案 #

方案1：通过官方配置直接关闭水印 #

FusionChart支持通过dataSource配置项直接移除水印，在数据源中添加以下配置：

dataSource: {
  // 现有图表配置...
  creditText: "", // 清空水印文本
  creditLink: ""  // 清空水印链接
}

这是最推荐的方式，无需操作DOM，符合官方规范。

方案2：使用Angular样式穿透解决样式失效问题 #

Angular默认的视图封装会阻止组件内样式影响子组件DOM，需要用::ng-deep穿透样式限制，修改后的CSS：

::ng-deep .fusion_chart g[class$="creditgroup"] {
  display: none !important;
}

::ng-deep .fusion_chart svg > g[class^="raphael-group-"] > text {
  display: none !important;
}

若追求长期兼容，可关闭组件的视图封装（需注意样式污染风险，建议用唯一类名隔离）：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'your-chart-component',
  templateUrl: './your-chart.component.html',
  styleUrls: ['./your-chart.component.css'],
  encapsulation: ViewEncapsulation.None // 关闭视图封装
})
export class YourChartComponent {
  // 组件逻辑
}

关闭封装后，原CSS即可生效。

方案3：通过DOM操作移除水印元素 #

若上述方案均无效，可在组件初始化完成后手动移除水印DOM元素：

1. 在模板中添加模板引用变量：

<fusioncharts #fusionChart class="fusion_chart" [dataSource]="dataSource"></fusioncharts>

2. 在组件类中实现AfterViewInit钩子：

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  // 组件配置
})
export class YourChartComponent implements AfterViewInit {
  @ViewChild('fusionChart') fusionChart!: ElementRef;

  ngAfterViewInit(): void {
    // 等待图表渲染完成（可根据实际情况调整延迟时间）
    setTimeout(() => {
      const creditElements = this.fusionChart.nativeElement.querySelectorAll('g[class$="creditgroup"], svg > g[class^="raphael-group-"] > text');
      creditElements.forEach(el => el.remove());
    }, 500);
  }
}

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