在 Angular 中导入 Plotly.js答案

【问题标题】：Import Plotly.js in Angular在 Angular 中导入 Plotly.js
【发布时间】：2019-06-20 05:19:39
【问题描述】：

我按照SO answer 中的说明将情节集成到应用程序中。

不幸的是，我在尝试 plotly.js 的标准示例时遇到了打字错误。 Plotly.newPlot(...) 的参数类型似乎不正确。

这是我的组件：

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

【问题讨论】：

标签： javascript typescript plotly

【解决方案1】：

您不需要将 Plotly 放入 angular.json 中，只需像这样导入即可。

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

【讨论】：

【解决方案2】：

我找到了以下解决方法。

手动将 Plotly.js 存储在 assets 文件夹中
在angular.json中导入脚本： "scripts": [src/assets/scripts/plotlyjs/plotly.js"]
在要使用的组件的导入语句下方添加declare const Plotly

【讨论】：