![如何在 html 中嵌入来自其他来源的实时图表](https://linux22.com/image/1575700/%E5%A6%82%E4%BD%95%E5%9C%A8%20html%20%E4%B8%AD%E5%B5%8C%E5%85%A5%E6%9D%A5%E8%87%AA%E5%85%B6%E4%BB%96%E6%9D%A5%E6%BA%90%E7%9A%84%E5%AE%9E%E6%97%B6%E5%9B%BE%E8%A1%A8.png)
我正在制作一个样本,试图向这里的管理层展示一种更好的工作方式,请理解我是 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>
作品。
我注意到,由于页面设置的原因,如果我缩放,页面会留下空白,所以我要尝试一下。但现在看起来还不错。