☰

如何在 html 中嵌入来自其他来源的实时图表

tag-icon • tag-icon html
如何在 html 中嵌入来自其他来源的实时图表

我正在制作一个样本，试图向这里的管理层展示一种更好的工作方式，请理解我是 100% 的新手，我不知道如何编码，但无论如何我都会尝试，因为这可以改善我们的工作方式，而且我总是追求改进。我们面临的部分问题是可用数据，即票务量墙板、工程师可用性、各个目的地的国际时钟等。我们目前的情况一团糟，我们正在考虑的解决方案可能更糟。

我已经开始创建一个非常基本的页面作为演示，但想嵌入一组来自内部来源的当前实时图表。我的意思是，我们有一个内部服务器，我们目前用它来显示饼图，以及当天创建/关闭的数字统计信息。我有该页面的 URL，但我如何才能从该页面或页面本身嵌入图表并裁剪多余的空间。

页面本身

以下是我目前所做的工作，它将页面分成五个供每个用户使用，我将考虑如何在以后以更简单的方式更新字段（从我们的系统中创建某种形式的反馈会很好，但这里非常封闭，所以值得怀疑。另外，这在现阶段有点超出我的理解范围）。我们需要时钟，还有工程师票和可用性的空间。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
    float: left;
    width: 20%;
    padding: 10px;
    }

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
</style>
</head>
<body>

<div style="text-align: center;">
<h2>Systems Team Status</h2>

<div class="row">
  <div class="column" style="background-color:#F5F5F5;">
    <h2>Ian</h2>
    <p><b>Availability</b></p>
<br />
<p>No outstanding tickets</p>
<br />
<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/timezone/australia--sydney"><span style="color:gray;">Current local time in</span><br />Australia/Sydney</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Australia%2FSydney" width="100%" height="90" frameborder="0" seamless></iframe> </div>
  </div>
  <div class="column" style="background-color:#FFFF;">
    <h2>Jon</h2>
    <p><b>Availability</b></p>
<br />
<p>No outstanding tickets</p>
<br />
<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/country/de"><span style="color:gray;">Current local time in</span><br />Germany</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Europe%2FBerlin" width="100%" height="90" frameborder="0" seamless></iframe> </div>
     </div>
  <div class="column" style="background-color:#F5F5F5;">
    <h2>Janet</h2>
<p><b>Availability</b></p>
<br />
    <p>No outstanding tickets</p>
<br />
<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/city/5128581"><span style="color:gray;">Current local time in</span><br />New York City, United States</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=America%2FNew_York" width="100%" height="90" frameborder="0" seamless></iframe> </div>
  </div>
  <div class="column" style="background-color:#FFFF;">
    <h2>Sonali</h2>
    <p><b>Availability</b></p>
<br />
<p>No outstanding tickets</p>
<br />
<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/country/in"><span style="color:gray;">Current local time in</span><br />India</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Asia%2FKolkata" width="100%" height="90" frameborder="0" seamless></iframe> </div>
  </div>
  <div class="column" style="background-color:#F5F5F5;">
    <h2>Ross</h2>
    <p><b>Availability</b></p>
<br />
<p>No outstanding tickets</p>
<br />
<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/city/1850147"><span style="color:gray;">Current local time in</span><br />Tokyo, Japan</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Asia%2FTokyo" width="100%" height="90" frameborder="0" seamless></iframe> </div>
  </div>
<div style="HEIGHT:45%;WIDTH:100%; COLSPAN="5; text-align:bottom" style="border-width:0px;border-top:1pt solid Black"><IMG SRC="Q:\Department\eBusiness\Systems\Test\logo.png;"></div>
</div>
</body>
</html>

我知道如果将分辨率塞进半个屏幕，分辨率会很差，但如果可能的话，我现在只想缩小它。这只是一个演示，如果他们明白要点，那么它将交给比我更优秀的人来编写/编码（希望如此，或者我被告知要使用它，但愿不会！）。

您会注意到，我试图在页面末尾添加一张图片。这只是为了看看是否可以显示任何内容，但我得到的是一个大约 5px X 5px 的小方框，里面有一个十字。这对于显示图表来说不是一个好兆头，因此不得不询问。

我浏览过之前的问题，但找不到符合要求的内容。谷歌搜索也没有太大帮助。

任何建议都非常感谢。请按上述方法分解事情，我不是程序员，但很乐意尝试一下，看看我能否让它们发挥作用。

****编辑**** 所以发帖后我继续谷歌搜索。我之前试过 iframe，但显然语法不正确。我现在得到了：

<iframe src="SOURCE OF CHARTS.com" style="border:none;width:100%; height:800px;"></iframe>

这样几乎完美适配，但设置为全屏时，所有内容都会显示出来，因此应该可以满足我的目的。现在的问题是，我是否以最佳方式完成了这项工作？此外，我如何缩放图像？

答案1

<iframe src="SOURCE OF CHARTS.com" style="border:none;width:100%; height:800px;"></iframe>作品。

我注意到，由于页面设置的原因，如果我缩放，页面会留下空白，所以我要尝试一下。但现在看起来还不错。

相关内容