在Angular中导入Plotly.js

发布时间：2020-12-17 07:06:51 所属栏目：安全来源：网络整理

导读：我按照 SO answer的说明在应用程序中进行了整合. 不幸的是,在尝试使用plotly.js的标准示例时,我会遇到打字稿错误. Plotly.newPlot(…)的参数类型似乎不正确. 这是我的组件： import {Component,OnInit} from '@angular/core';import * as Plotly from 'plotl

我按照 SO answer的说明在应用程序中进行了整合.

不幸的是,在尝试使用plotly.js的标准示例时,我会遇到打字稿错误. Plotly.newPlot(…)的参数类型似乎不正确.

enter image description here

这是我的组件：

import {Component,OnInit} from '@angular/core';
import * as Plotly from 'plotly.js';
import {Config,Data,Layout} from 'plotly.js';

@Component({
  selector: 'app-tabs',templateUrl: './tabs.component.html',styleUrls: ['./tabs.component.css']
})
export class TabsComponent implements OnInit {

  constructor() {
  }

  ngOnInit() {
    let y0 = [];
    let y1 = [];
    for (var i = 0; i < 50; i++) {
      y0[i] = Math.random();
      y1[i] = Math.random() + 1;
    }
    var trace1 = {
      y: y0,type: 'box'
    };
    let trace2 = {
      y: y1,type: 'box'
    };

    let data = [trace1,trace2];
    Plotly.newPlot('myDiv',data);
  }
}

我使用plotly.js@1.37.1和angular v6.0.0

解决方法

你不需要将Plotly放在angular.json中就可以像这样导入.

import * as Plotly from 'plotly.js/dist/plotly.js';
import {Config,Layout} from 'plotly.js/dist/plotly.js';

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!