无法使用 Plotly 显示曲面图，Angular 12

Question

我正在尝试使用 Plotly (https://github.com/plotly/angular-plotly.js/blob/master/README.md) 显示 3d 模型，但图表没有出现。

componente.component.ts

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

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

  public graph = {
    z: this.data,
    type: 'surface',
    layout: {autosize: true, title: 'Modelo 3d'}
  };

}

componente.component.html

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

这是现在显示的内容

应该是这样的：

我试图让它在 angular 上工作一整天，但我还不够好:/任何帮助都会很棒:D

Answer 1

我是这样解决的：

import * as PlotlyJS from 'plotly.js-dist-min';

getData() {
    var arr = [];
    for(let i=0;i<40;i++)
        arr.push(Array(40).fill(undefined).map(() => Math.random() * 256))
    //console.log(arr);
    arr.push({type: 'scatter3d'});
    return arr;
  }

testButton () {
    this.getModelo3d();
    PlotlyJS.newPlot('chart', [{
      z: this.getData(),
      type: 'surface'
    }]);
  }

在html

<div id="chart"></div>

Answer 2

我遇到了与您遇到的问题类似的问题。

就我而言，问题是导入了错误的模块。

我使用了 Vue 并从 Vue-CLI 安装了它，但我安装了一个具有相似名称和另一个名称的模块。所以虽然可以设置surface和heatmap，但是不支持，所以处理成折线图。

我的导入语句是：从 'plotly.js-basic-dist';

导入 * as Plotly

根据 Github 自述文件，它是“plotly.js-dist-min”。

https://github.com/plotly/plotly.js#load-as-a-node-module

无法使用 Plotly 显示曲面图，Angular 12

Can't show surface chart with Plotly, Angular 12

charts

typescript

plotly

angular

angular12