如何显示另一个网站的交互式图形？

问题描述 投票：0回答：1

为了好玩，我试图将整个网站的源代码复制到一个.html文件中，并从我的桌面（不是公共的）在本地运行它。虽然大多数情况下，所有的东西都能像在原始网站上一样加载，但我在显示交互式图形的实际内容时遇到了问题。

例如 诺阿全球监测实验室 显示Keeling's Curve的交互式版本，其特点是可以从底部（时间框架）操作两个图形，悬停在上面显示数字等。

它看起来应该是这样的。

enter image description here

但相反，我的本地文件是这样的：

enter image description here

正如你所看到的，斜面图本身不见了 还有下面和旁边的一些其他功能也不见了 我到底做错了什么？很明显，网站的实际样式表有缩短的文件路径（如 /gmd/css/gmd.css)，所以我确保本地HTML文件中有直接的链接(例如. https://esrl.noaa/gov/gmd/css/gmd.css).

我在检查元素控制台的元素选项卡中复制了整个HTML代码（所有在 <!DOCTYPE html>). 我是否应该在本地文件中添加其他内容？

更新: 控制台里有一长串错误，但实际只有四行错误代码。错误和错误的代码都显示在下面。

Error listWarning listFaulty code 1Faulty code 2Faulty code 3Faulty code 4

javascript html jquery csv dygraphs
1个回答
1
投票

你是直接从本地磁盘加载HTML吗？一般来说，你 做不到 XMLHttpRequest的本地文件.

你最好的选择是旋转一个小的HTTP服务器，从那里加载内容。两个不错的选择是Python的 http.server:

python -m http.server

或节点的http服务器。

npm install --global http-server
http-server
1
投票

错误的第一个脚本标签(高亮显示)包含一个错别字(/gov 而不是 .gov). 应该是。

https://esrl.noaa.gov/gmd/js/dygraph.min.js

而不是

https://esrl.noaa/gov/gmd/js/dygraph.min.js
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.