plotly / plotly/plotly.js

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

Đang mở
#7,442 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

feature P3
Ngôn ngữ chính
JavaScript
Star
18.3k
Fork
2k
Merge trung bình
2 ngày 12 giờ
Pull request đã merge (30 ngày)
28

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Không có tệp repository hoặc test nào được nêu tên. Hãy tái hiện script root đang hoạt động và script được thêm động trong trình duyệt bằng các phiên bản Plotly được báo cáo, sau đó kiểm tra việc tải script và quá trình khởi tạo window.Plotly. Hoàn tất nghĩa là xác định lazy loading có được hỗ trợ hay không và ghi lại hoặc sửa hành vi đó bằng một regression check.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
javascript, typescript
Lĩnh vực
data-visualization, frontend, web-dev
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
28/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.