Как встроить живой график из другого источника в HTML

358
Rossco

Я работаю над примером, чтобы попытаться показать руководству лучший способ работы, пожалуйста, поймите, что я на 100% новичок, я не знаю, как кодировать, но в любом случае у меня есть шанс, так как это может улучшить нашу работу, и я всегда за улучшение Частью проблемы, которая у нас есть, являются доступные данные, то есть информационные табло об объемах заявок, доступности инженеров, международных часах для различных направлений и т. Д. На данный момент у нас беспорядок, и решение, которое мы ищем, вероятно, хуже.

Я начал создавать очень простую страницу в качестве демонстрации, но хочу встроить текущий набор графиков из внутреннего источника. Под этим я подразумеваю, что у нас есть внутренний сервер, который мы в настоящее время используем для отображения круговых диаграмм и статистики по числам, созданным / закрытым за день. У меня есть URL для указанной страницы, но как я могу встроить диаграммы из этой страницы или самой страницы и обрезать лишнее пространство.

The page itself

Ниже приведено то, что я сделал до сих пор: он разбивает страницу на пять для каждого пользователя, и я буду беспокоиться о том, как позднее обновить поля более простым способом (было бы неплохо создать некоторую форму фида из наши системы, но это очень заперто здесь, так что сомнительно. Плюс, это немного за мной на данном этапе). Нам нужны часы, место для билетов инженера и наличие мест.

<!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>

Я знаю, что разрешение будет выходом из строя, если его втиснуть в половину экрана, но я просто собирался уменьшить его, если это возможно. Это всего лишь демонстрация, и если они получат суть, то она будет полезна людям, пишущим / пишущим код намного лучше, чем я (надеюсь, либо мне, либо мне скажут работать с ним, надеюсь, нет!).

Вы заметите мою попытку поместить изображение на страницу в конце. Это было только для того, чтобы увидеть, смогу ли я получить что-нибудь для отображения, но вместо этого я получил небольшую квадратную коробку размером 5 на 5 х 5 с крестовиной. Это не сулило ничего хорошего для отображения диаграмм и, следовательно, необходимости спрашивать.

Я просматривал предыдущие вопросы, но не вижу ничего подходящего. Поиск в Google тоже не сильно помог.

Любой совет высоко ценится. Пожалуйста, разберитесь, как я уже говорил, я не программист, но я рад попробовать и посмотреть, смогу ли я заставить их работать.

**** РЕДАКТИРОВАТЬ **** Итак, после публикации я продолжил в Google. Я пробовал iframe раньше, но ясно, что синтаксис не был правильным. Теперь у меня есть:

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

Это делает его почти идеально подходящим, но при работе в полноэкранном режиме все это отображается, поэтому должно работать нормально для моих целей. Я сделал это лучшим способом, теперь вопрос? Кроме того, как я могу масштабировать изображение?

0

1 ответ на вопрос

0
Rossco

<iframe src="SOURCE OF CHARTS.com" style="border:none;width:100%; height:800px;"></iframe> работает.

Я заметил из-за настройки страницы, если я масштабирую ее, оставляя пустые места, поэтому собираюсь поиграть. Но пока все выглядит хорошо.

Похожие вопросы