如何将plotly.js导入TypeScript？

我正在尝试将

plotly.js

导入到TypeScript中。Plotly.js是使用

npm

安装的。在我的TypeScript文件中，我使用

import 'plotly.js';

没关系，但我在代码上遇到了错误，比如

Plotly.

：

当我尝试

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

我要走了

error TS2307: Cannot find module 'plotly.js'.

---

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

对于plotly，似乎有人已经制作了一个声明文件。因此，一旦安装了typings（

npmi-g typings

），就可以搜索plotly的类型声明（

typings search plotly

）。您将看到在上有一个声明文件可用。初始化项目的键入（

typings init

）后，可以安装声明文件（

typings i--global--save plotly.js

）

请注意

--global

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

// app.ts
let myPlotlyConfig: PlotlyConfig

结果是：

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

（请参考index-basic.js，因为我只需要基本功能，请使用index.js查看完整的库。）

编辑（2018年2月）：

现在首选的方法是将路径添加到

tsconfig.json

文件中，如下所示：

"compilerOptions": {
    "paths": {
        "plotly.js": [
            "../node_modules/plotly.js/lib/core.js"
        ]
    }
}

然后导入

.ts

文件，如

import * as Plotly from 'plotly.js';

注意：在我只包含

core.js

的路径中，包含

scatter

图形，您可以根据需要导入其他图形

---

（我将其用于Angular CLI-Angular 5.2和Typesript 2.7.1）

plotly.js（）有一个明确的类型版本。这允许您在Typescript中使用普通Javascript版本。按照以下步骤设置您的环境：

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

然后在代码中可以执行以下操作（示例取自）：

import*作为Plotly从'Plotly.js'导入；
常量数据：Plotly.BarData[]=[
{
x:[‘长颈鹿’、‘猩猩’、‘猴子’]，
y:[20,14,23]，
类型：'bar'
}
];
Plotly.newPlot（“测试”，数据）；

最后，您需要使用

tsc

将Typescript转换为javascript，并使用

browserify

准备要包含在您的网页中的代码

这也适用于离子2！确保手动添加以下程序包：

npm install --save glslify
npm install --save mapbox-gl

---

使用NPM安装plotly.js：

npm install --save plotly.js

然后在组件或服务中，无论您想在何处使用导入，如：

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，如下所示：

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

Plotly.newPlot('test', data);

TS支持 或

及

⚠️不要在依赖项中安装@types，因为它们专门用于开发目的

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

我知道你没有明确提到React，但我想你或其他有类似问题的人可能会觉得这很有用

我不确定您的捆绑方式，但是，我正在使用Webpack 4，目前正在调查react plotly+plotly.js basic dist组合

可能的组合有：

• –我的选择。如果需要，您可以添加更多捆绑包

更多关于

这使包裹的大小显著减小，太阳再次照耀着我们

但是

因为这种方法需要工厂和自定义dist，所以在撰写本文时，这些都没有类型

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

修理

创建@types文件夹

将typeRoots添加到tsconfig.json

N.B.以下方法确实修复了上述导入的类型，但我仍然有一个编译失败的问题，我没有按照公认的答案修复该问题：

希望你有更好的体验

---

更新 我解决了编译问题。这是因为react-plotly.js被捆绑在“依赖项”中。在我的案例中，供应商DEP的处理方式如下：

"compilerOptions": {
    "paths": {
        "plotly.js": [
            "../node_modules/plotly.js/lib/core.js"
        ]
    }
}

/**
*给定一个文件数组，这将生成一个包含供应商入口点值的对象
*/
函数makeVendorEntry（配置）{
const packageJson=require（'../package.json'）；
const vendorDependencies=Object.keys（packageJson['dependencies']）；
常量VendorModulesMinuseClusions=vendorDependencies.filter（vendorModule=>
config.mainModules.indexOf（vendorModule）==-1&&config.modulesToExclude.indexOf（vendorModule）==-1；
返回供应商模块最小值结论；
}
exports.makeVendorEntry=makeVendorEntry类型。
从
v1.39.0
开始，您还可以将类型与basic或cartesian等一起使用。plotly.js basic的示例（包含
散点
、
饼图
和
条形图
）：

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

"compilerOptions": {
  // make aliases absolute imports relative to the project root
  "baseUrl": "./",                
  "paths": {
    "plotly.js-basic-dist": [
      "node_modules/@types/plotly.js"
    ]
  }
}

上面的
路径
config只是将导入的
plotly.js基本dist
包映射到
@types/plotly.js
中定义的类型，因此您可以将它们与
plotly.js基本dist
一起使用。更多资讯：




找不到模块“plotly.js/dist/plotly.js”的声明文件C:/Users/spri28/TEST2/tst/node_modules/plotly.js/dist/plotly.js'隐式具有“any”类型。


要删除错误，请使用此选项

在tsconfig json文件中添加
noImplicitAny:false
，以删除错误。
通常情况下，您的键入是正确的。Plotly的功能只是在一个非常早期的体育场中，实际上只有一个功能，所以还不能使用。无论如何+1pltly.js也可以用于爱奥尼亚2我使用键入的plotly得到404个错误：node_modules/plotly.js/src/traces/bar.js 404（未找到）、node_modules/plotly.js/src/traces/box.js 404（未找到）等等。您有这个问题吗？您可以从“Plotly.js”编写
import Plotly作为库ha
import { PlotData } from "plotly.js"; // or whatever you need

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

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

"compilerOptions": {
  // make aliases absolute imports relative to the project root
  "baseUrl": "./",                
  "paths": {
    "plotly.js-basic-dist": [
      "node_modules/@types/plotly.js"
    ]
  }
}