Angular 12使用angular-plotly.js无法渲染surface曲面图求助

1. 核心错误：数据结构不匹配 #

Plotly组件的[data]输入属性要求接收trace配置对象组成的数组，你当前直接把z轴二维数组传给了[data]，且把type配置错放在了和layout平级的位置，不符合组件要求的结构。

修正后 componente.component.ts 代码 #

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

@Component({
  selector: 'app-componente',
  templateUrl: './componente.component.html',
  styleUrls: ['./componente.component.css']
})
export class ComponenteComponent{
  
  getData() {
    const arr = [];
    for(let i=0;i<25;i++) {
        arr.push(Array(25).fill(undefined).map(() => Math.random()))
    }
    return arr;
  } 
  data: number[][] = this.getData();

  public graph = {
    // data为数组，内部存放trace配置对象
    data: [
      {
        z: this.data,
        type: 'surface'
      }
    ],
    layout: {autosize: true, title: 'Modelo 3d'}
  };
}

2. 模板绑定修正 #

将模板中绑定的graph.z替换为调整后的trace数组：

修正后 componente.component.html 代码 #

<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>

3. 额外检查项 #

• 确认当前组件所属的NgModule（或独立组件的imports数组）中已正确导入PlotlyModule
• 为组件设置明确高度，避免父容器无高度导致图表渲染异常，可在componente.component.css中添加：

plotly-plot {
  width: 100%;
  height: 600px;
}

内容的提问来源于stack exchange，提问作者Ernesto Andres Cabello Venegas