如何将plotly.js导入到TypeScript中？

我正试图将plotly.js导入到TypeScript中。 Plotly.js使用npm进行安装。在我的打字稿文件我用如何将plotly.js导入到TypeScript中？

import 'plotly.js';

这是确定的，但我得到的错误代码上像Plotly.<member>：

error TS2304: Cannot find name 'Plotly'

当我尝试

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

我越来越

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

来源

2016-08-22 eXavier

结束：

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

（参照指数basic.js，因为我只需要基本功能，为全面图书馆利用index.js）

编辑（Feb 2018）：

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

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

然后导入在.ts文件中像

import * as Plotly from 'plotly.js';

注：在路上，我只包括core.js，其中包含scatter图表，因为你需要，你可以导入其他图形。

（我使用它与角CLI - 角5.2和2.7.1 Typesript）

来源

2016-08-31 11:30:49 eXavier

我正在做'var Plotly = require（'plotly.js/dist/plotly.js'）'这也正常工作。你知道吗，两者有什么不同？ –

@yugantarkumar我只包含基本模块（我只需要散点图）。你包括完整的图书馆。检查这个链接https://github.com/plotly/plotly.js/blob/master/dist/README.md – eXavier

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

对于情节，似乎有人已经做出了声明文件。所以一旦你安装了打字机（npm i -g typings），你可以搜索剧情类型声明（typings search plotly）。您会看到在Definitely Typed上有一个声明文件。在初始化项目的类型（typings init）后，可以安装声明文件（typings i --global --save plotly.js）。

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

// app.ts 
let myPlotlyConfig: PlotlyConfig

来源

2016-08-22 16:58:10

Ge一般来说，你是正确的打字。 Plotly的只是在一个非常早的体育场内，实际上只有1个功能，所以它现在还不可用。无论如何+1 – eXavier

没有为plotly.js可用绝对类型版本（Github link）。这使您可以在Typescript中使用简单的Javascript版本。请按照以下步骤设置你的环境：

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

然后在你的代码，你可以做以下（从Github采取为例）：

import * as Plotly from 'plotly.js'; 

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

Plotly.newPlot('test', data);

最后，您需要的打字稿转换为JavaScript和tsc和准备代码将包含在您的网页browserify。

这也适用于离子2！请确保您手动添加以下软件包：

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

来源

2017-06-16 06:30:06

虽然这个链接可能回答这个问题，但最好在这里包含答案的基本部分，并提供链接供参考。如果链接页面更改，则仅链接答案可能会失效。 – thewaywewere

谢谢@thewaywewere！我相应地修改了我的答案。 –

plotly.js也可用于离子2 –

使用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 
]);

使用如下图示：

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

Plotly.newPlot('test', data);

来源

2017-12-18 16:37:17

如何将plotly.js导入到TypeScript中？

回答

相关问题