PlotlyJS 'scatter3D'在ng build后无法正常显示求助

几个可行的修复方向： #

1. 修正Plotly导入方式，避免Tree Shaking误删依赖 #

plotly.js-dist-min是精简包，但scatter3d依赖的WebGL组件可能被Angular的生产构建Tree Shaking当成无用代码删掉。试试换导入方式：

• 要么直接导入完整Plotly包（体积会大一点，但能确保所有组件都在）：

import Plotly from 'plotly.js';

• 要么按需导入需要的trace类型，手动注册：

import Plotly from 'plotly.js/lib/core';
import scatter3d from 'plotly.js/lib/scatter3d';
import scattergl from 'plotly.js/lib/scattergl';

Plotly.register([scatter3d, scattergl]);

2. 配置Angular构建，排除Plotly的优化 #

Angular生产构建的优化逻辑可能误伤Plotly，在angular.json里改配置：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "options": {
            "optimization": {
              "scripts": false, // 暂时禁用脚本优化，验证是否是这个问题
              "styles": true,
              "fonts": true
            },
            "allowedCommonJsDependencies": [
              "plotly.js-dist-min"
            ]
          }
        }
      }
    }
  }

如果不想全关脚本优化，就在项目根目录的package.json里加sideEffects标记，告诉构建工具Plotly的文件有副作用不能随便删：

"sideEffects": [
  "node_modules/plotly.js-dist-min/**/*.js"
]

3. 确保在视图初始化完成后渲染图表 #

Angular组件里别在ngOnInit里渲染3D图，等视图完全加载好的ngAfterViewInit钩子再执行：

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import Plotly from 'plotly.js-dist-min';

@Component({
  selector: 'app-3d-chart',
  template: '<div #chartBox></div>'
})
export class Chart3dComponent implements AfterViewInit {
  @ViewChild('chartBox') chartBox!: ElementRef;

  ngAfterViewInit(): void {
    const chartData = [{
      type: 'scatter3d',
      x: [1, 2, 3],
      y: [4, 5, 6],
      z: [7, 8, 9],
      mode: 'markers'
    }];
    const layout = { title: '3D散点图' };
    Plotly.newPlot(this.chartBox.nativeElement, chartData, layout);
  }
}

4. 检查Plotly静态资源路径 #

Plotly的3D渲染依赖一些WebGL shader文件，构建后这些文件可能没被正确复制到部署目录。在angular.json的assets里添加配置，把这些资源拷贝过去：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/plotly.js/dist",
                "output": "./assets/plotly/"
              }
            ]
          }
        }
      }
    }
  }

然后初始化Plotly时指定资源路径：

Plotly.setPlotConfig({
  baseUrl: 'assets/plotly/'
});

5. 降级Plotly版本试试 #

有时候新版本Plotly和Angular构建链有兼容性问题，回退到2.30.x的稳定版看看：

npm install plotly.js-dist-min@2.30.1

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