Angular 8中无需组件render函数为FusionCharts添加数据加载提示

看起来你用的是Angular版本的FusionCharts组件，完全依赖dataSource绑定来渲染图表，确实官方文档里没提供通过JSON配置直接设置加载提示的方法，不过我们可以用两种灵活的方式实现需求：

方案一：用Angular状态控制显示切换 #

这是最直观的方法，通过组件内部的状态变量，在数据准备好之前显示加载提示，就绪后再渲染图表：

1. 在你的组件类里加个状态标记：

isChartReady = false;

2. 当你获取到metric数据（也就是要传给dataSource的JSON）后，把这个标记设为true：

// 假设你是通过接口请求获取数据
this.apiService.getChartData().subscribe(data => {
  this.metric = data;
  this.isChartReady = true; // 数据就绪，标记切换
});

3. 在模板里用*ngIf控制显示：

<!-- 加载提示 -->
<div *ngIf="!isChartReady" style="display: flex; justify-content: center; align-items: center; height: 600px;">
  图表数据加载中，请稍候...
</div>
<!-- 图表组件 -->
<fusioncharts 
  *ngIf="isChartReady"
  width="100%" 
  height="600" 
  [type]="metric.type" 
  [dataSource]="metric">
</fusioncharts>

你可以给加载提示的div加自定义样式，比如换个加载动画、调整字体样式，让它更贴合你的页面风格。

方案二：绑定FusionCharts的生命周期事件 #

这个方法能精准捕获图表的加载状态，利用FusionCharts自带的dataLoadStart和dataLoadComplete事件来控制提示：

1. 同样在组件类里加状态标记：

isLoading = true;

2. 写两个事件处理函数：

onChartLoadStart() {
  this.isLoading = true;
}

onChartLoadComplete() {
  this.isLoading = false;
}

3. 在模板里绑定事件并控制显示：

<div *ngIf="isLoading" style="display: flex; justify-content: center; align-items: center; height: 600px;">
  图表数据加载中，请稍候...
</div>
<fusioncharts 
  width="100%" 
  height="600" 
  [type]="metric.type" 
  [dataSource]="metric"
  (dataLoadStart)="onChartLoadStart()"
  (dataLoadComplete)="onChartLoadComplete()">
</fusioncharts>

这个方案的优势是能精准对应图表的数据加载周期，哪怕dataSource是异步更新的，也能正确触发提示的显示和隐藏。

小提示 #

如果需要更专业的加载效果，你可以把文字提示换成SVG加载动画，或者用一些Angular的加载组件，核心思路都是通过状态切换来控制提示和图表的显示逻辑。

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