Импортировать Plotly.js в Angular

Question

Я следовал инструкциям этого SO ответа , чтобы плотно интегрироваться в приложение.

К сожалению, я испытываю ошибки машинописи при попытке попробовать стандартные примеры 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 и угловой v6.0.0

Answer 1

Вам не нужно помещать Plotly в angular.json , просто импортируйте вот так.

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

Answer 2

Я нашел следующий обходной путь.

• сохранить Plotly.js в папке ресурсов вручную
• импортировать скрипт в angular.json: "scripts": [src/assets/scripts/plotlyjs/plotly.js"]
• добавьте declare const Plotly прямо под операторы импорта в компоненте, где вы хотите использовать сюжет