如何将plotly.js导入TypeScript？


How to import plotly.js into TypeScript?

我正在尝试将plotly.js导入TypeScript。 使用npm安装Plotly.js。 在我的TypeScript文件中

1
import 'plotly.js';

可以，但是我在Plotly.之类的代码上遇到错误：

1
error TS2304: Cannot find name 'Plotly'

当我尝试

1
import Plotly = require('plotly.js');

我越来越

1
error TS2307: Cannot find module 'plotly.js'.
相关讨论

有一个可用于plotly.js的"绝对类型"版本(Github链接)。这使您可以在Typescript中使用纯Javascript版本。请按照以下步骤设置您的环境：

1
2
npm install --save plotly.js
npm install --save @types/plotly.js

然后，您可以在代码中执行以下操作(示例取自Github)：

1
2
3
4
5
6
7
8
9
10
11
import * as Plotly from 'plotly.js';

const data: Plotly.BarData[] = [
  {
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [20, 14, 23],
    type: 'bar'
  }
];

Plotly.newPlot('test', data);

最后，您需要使用tsc将Typescript转换为javascript，并使用browserify准备要包含在您的网页中的代码。

现在也适用于ionic 2！确保您手动添加以下软件包：

1
2
npm install --save glslify
npm install --save mapbox-gl
相关讨论

最终得到：

1
2
declare function require(moduleName: string): any;
var Plotly = require('plotly.js/lib/index-basic.js');

(由于我只需要基本功能，请参考index-basic.js，将index.js用于完整的库。)

编辑(2018年2月)：

现在首选的方法是将路径添加到tsconfig.json文件中，如下所示：

1
2
3
4
5
6
7
"compilerOptions": {
   "paths": {
       "plotly.js": [
           "../node_modules/plotly.js/lib/core.js"
        ]
    }
}

然后像这样导入.ts文件

1
import * as Plotly from 'plotly.js';

注意：在仅包含core.js(包含scatter图)的路径中，您可以根据需要导入其他图。

(我在Angular CLI中使用它-Angular 5.2和Typesript 2.7.1)

相关讨论

TS支持

1
npm install --save-dev @types/plotly.js`

要么

1
yarn add --dev @types/plotly.js`

和

1
import { PlotData } from"plotly.js"; // or whatever you need

不要将@types安装在依赖项中，因为它们仅用于开发目的。

问题

由于您添加了plotly.js的类型，因此您希望从plotly.js而不是特定模块中导入内容。这一切都很好，直到您想将其与react即使用一起使用，即react-plotly + plotly.js ??

我知道您没有明确提及React，但是我认为您或其他遇到类似问题的人可能会觉得这很有用。

我不确定您的捆绑方法，但是，我使用的是Webpack 4，目前正在研究react-plotly + plotly.js-basic-dist组合。

可能的组合是：

  • react-plotly + plotly.js-basic-dist –我的选择。您可以根据需要添加更多捆绑包
  • 反应图+ CDN
  • react-plotly +自定义包

有关自定义绘图包的更多信息。

这使捆束的尺寸大大减小，太阳再次照在我们身上。

但...

由于此方法需要工厂和自定义dist，因此在撰写本文时，这些没有类型

1
2
3
import Plotly from"plotly.js-basic-dist";
import createPlotlyComponent from"react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);

固定

  • 创建一个@types文件夹

    enter image description here

  • 将typeRoots添加到tsconfig.json

    enter image description here

    • N.B.以下方法确实修复了上述导入的类型，但是我仍然编译失败，但是按照可接受的答案，我无法解决该问题：
    enter image description here

    希望您有更好的体验！

    更新

    我解决了编译问题。这是因为react-plotly.js被捆绑在" dependencies"中。对于我来说，供应商部门的处理方式如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    /**
     * Given an array of files this will produce an object which contains the values for the vendor entry point
     */
    function makeVendorEntry(config) {
        const packageJson = require('../package.json');
        const vendorDependencies = Object.keys(packageJson['dependencies']);

        const vendorModulesMinusExclusions = vendorDependencies.filter(vendorModule =>
            config.mainModules.indexOf(vendorModule) === -1 && config.modulesToExclude.indexOf(vendorModule) === -1);

        return vendorModulesMinusExclusions;
    }

    exports.makeVendorEntry = makeVendorEntry;

    相反，我将react-plotly.js移到了devDependencies上，现在可以正常工作了。

    如果要导入的npm库本身未提供类型声明，则必须自己导入它们。首选工具是打字。

    出于阴谋，似乎已经有人声明了文件。因此，一旦安装了类型(npm i -g typings)，就可以搜索plotly(typings search plotly)的类型声明。您会看到在"绝对类型"上有一个声明文件。初始化项目(typings init)的类型后，可以安装声明文件(typings i --global --save plotly.js)。

    注意--global。此特定的声明文件是全局声明文件。这意味着您不必导入任何类型，因为这些类型在项目中随处可见。例如。

    1
    2
    // app.ts
    let myPlotlyConfig: PlotlyConfig
    相关讨论

    使用NPM安装plotly.js：

    1
    npm install --save plotly.js

    然后在组件或服务中要使用导入的任何地方，例如：

    1
    2
    3
    4
    5
    6
    import Plotly from 'plotly.js/lib/core';
    Plotly.register([
     require('plotly.js/lib/heatmap'),
     require('plotly.js/lib/bar'),
     require('plotly.js/lib/pie') // can include as many plot types as you want
    ]);

    使用plotly lib，如下所示：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const data: Plotly.BarData[] = [
     {
       x: ['giraffes', 'orangutans', 'monkeys'],
       y: [20, 14, 23],
       type: 'bar'
     }
    ];

    Plotly.newPlot('test', data);
    plotly.js basic＆Co.的类型

    您还可以将类型与部分npm捆绑包(例如基本或笛卡尔)一起使用，从v1.39.0开始。 基本的plotly.js示例(包含scatter，pie和bar)：

    1
    2
    npm i plotly.js-basic-dist
    npm i -D @types/plotly.js

    在tsconfig.json中添加以下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    "compilerOptions": {
      // make aliases absolute imports relative to the project root
     "baseUrl":"./",                
     "paths": {
       "plotly.js-basic-dist": [
         "node_modules/@types/plotly.js"
        ]
      }
    }

    在paths上面的配置仅将导入的plotly.js-basic-dist包映射到@types/plotly.js中定义的那些类型，因此您可以将它们与plotly.js-basic-dist一起使用。 更多信息：

    • baseUrl
    • 路径