web-dev-qa-db-ja.com

plotly.jsをTypeScriptにインポートする方法は？

plotly.jsをTypeScriptにインポートしようとしています。 Plotly.jsはnpmを使用してインストールされます。私のTypeScriptファイルでは

import 'plotly.js';

大丈夫ですが、Plotly.<member>のようなコードでエラーが発生します。

error TS2304: Cannot find name 'Plotly'

やってみると

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

私は得ています

error TS2307: Cannot find module 'plotly.js'.
typescriptplotly
10
eXavier

最終的に：

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';

注：scatterグラフを含むcore.jsのみを含めたパスでは、必要に応じて他のグラフをインポートできます。

（私はそれをAngular CLI-Angular 5.2およびTypesript2.7.1で使用しています）

9
eXavier

Plotly.jsで使用できるDefinitelyTypedバージョンがあります（ Githubリンク ）。これにより、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);

最後に、TypeScriptをtscでjavascriptに変換し、browserifyでWebページに含めるコードを準備する必要があります。

これは、ionic 2でも機能するようになりました！次のパッケージを手動で追加してください。

npm install --save glslify
npm install --save mapbox-gl
16
Ronald Ligteringen

TSサポート

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

または

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

そして

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の組み合わせを調査しています。

可能な組み合わせは次のとおりです。

詳細 プロットバンドルのカスタマイズ 。

これにより、バンドルサイズが大幅に縮小され、太陽が再び私たちを照らします。

だが...

このアプローチにはファクトリとカスタムdistが必要になるため、この記事の執筆時点では、これらにはタイプがありません。

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

修正

  1. @typesフォルダーを作成します

    enter image description here

  2. TypeRootsをtsconfig.jsonに追加します

    enter image description here

N.B。次のアプローチで上記のインポートのタイプが修正されましたが、コンパイルが失敗し、受け入れられた回答に従って修正できませんでした： enter image description here

あなたがより良い経験をすることを願っています！

更新

コンパイルの問題を修正しました。これは、react-plotly.jsが「依存関係」にバンドルされていたためです。私の場合、ベンダーの担当者は次のように処理されます。

/**
 * 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に追加すると、正常に動作するようになりました。

5
Roland Jegorov

インポートするnpmライブラリが型宣言自体を提供しない場合は、自分でインポートする必要があります。推奨されるツールは typings です。

プロット的には、誰かがすでに宣言ファイルを作成しているようです。したがって、タイピングをインストールしたら（npm i -g typings）、plotlyのタイプ宣言（typings search plotly）を検索できます。 Definitely Typed で利用可能な宣言ファイルがあることがわかります。プロジェクトの型指定を初期化した後（typings init）、宣言ファイル（typings i --global --save plotly.js）をインストールできます。

--globalに注意してください。この特定の宣言ファイルはグローバル宣言ファイルです。これは、タイプがプロジェクトのどこでも利用できるため、タイプをインポートする必要がないことを意味します。例えば。

// app.ts
let myPlotlyConfig: PlotlyConfig
2
Pelle Jacobs

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

以下のようにplotlylibを使用します。

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

Plotly.newPlot('test', data);
1
Priya Gupta

Plotly.js basic＆Coのタイプ。

v1.39.0で始まる、基本またはデカルトのような 部分的なnpmバンドル と一緒に型を使用することもできます。 plotly.js basicの例（scatter、pie、およびbarを含む）：

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

Tsconfig.jsonに以下を追加します。

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

上記のpaths configは、インポートしたplotly.js-basic-distパッケージを@types/plotly.jsで定義されたタイプにマップするだけなので、plotly.js-basic-distで使用できます。詳細情報：

0
ford04