plotly / plotly/plotly.js

Lazy Loading Plotly from CDN does not populate the `window.Plotly` namespace

オープン
#7,442 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

feature P3
主要言語
JavaScript
スター
18.3k
フォーク
2k
平均マージ
2日 12時間
マージ済み PR(30日)
28

説明

I want to lazy load Plotly from a CDN in my application, when required. When I dynamically create a <script> tag to fetch the CDN at runtime, the window.Ploty namespace is not populated.

  1. Is it possible to support this mechanism?
  2. Is there something I need to hook into with the initial page load?
Consuming CDN at application root

When I fetch plotly from a CDN via an html <script> tag added to my applications root. My chart render and work as expected. The file is fetched, initialized and the window.Plotly instance exists.

<!-- WORKS -->
 <script type="text/javascript" src="https://cdn.plot.ly/plotly-2.24.3.min.js"></script> 
Consuming CDN with lazy load

However, if I want to lazy load the CDN by creating the <script> tag only when required. When I do this in typescript, the file is successfully fetched, but the window.Plotly namespace never gets populated:

/** DOES NOT WORK */
const init = (): void => {
  const src = 'https://cdn.plot.ly/plotly-2.35.2.min.js';
  const script: HTMLScriptElement = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  script.onerror = (): void => {
    console.error(`Error loading plotly.js library from ${src}`);
  };

  const head: HTMLHeadElement = document.getElementsByTagName('head')[0];
  head.appendChild(script);

  let counter = 200; // equivalent of 10 seconds...
  // Checks if the plotly.js library is loaded by looking for the global Plotly variable.
  const checkLoad = (): void => {
    const plotly = (window as PlotlyWindow).Plotly;
    if (plotly) {
      // ready
      // do something
    } else if (counter > 0) {
      // wait
      counter--;
      setTimeout(checkLoad, 50);
    } else {
      // expire
      throw new Error(`Error loading plotly.js library from ${src}. Timeout.`);
    }
  };
  checkLoad();
};

Image

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

リポジトリのファイルもテストも指定されていません。報告された Plotly のバージョンを使用して、動作しているルートスクリプトと動的に追加されたスクリプトをブラウザで再現し、その後スクリプトの読み込みと window.Plotly の初期化を調査してください。完了の条件は、lazy loading がサポートされているかを特定し、回帰テストによって動作を文書化または修正することです。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, typescript
領域
data-visualization, frontend, web-dev
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
28/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。