Блог

я пытаюсь показать 3d-модель с плотностью (https://github.com/plotly/angular-plotly.js/blob/master/README.md), но диаграмма не отображается.

компонент.компонент.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 весь день, но я недостаточно хорош :/ любая помощь будет потрясающей 😀

Я решаю эту проблему таким образом:

 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>