Я борюсь с этим несколько дней. Он не реагирует на мобильные устройства, а также при изменении размера браузера.
Я пытаюсь запустить это как фрейм на сайтах Google, но отсутствие отзывчивости делает его еще хуже при просмотре. Любые указатели на то, что мне не хватает? Это то, что я сделал до сих пор.
Спасибо
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<style type="text/css">
@media screen and (max-device-width:800px){ }
#chart_div {
background-image: url('https://i.ibb.co/pZYVjgQ/testbgm.png');
background-repeat: no-repeat;
background-size: 1048px;
padding-left: 80px !important;
padding-top: 85px;
}
#chart_div table {
padding: 11px !important;
}
#chart_div2 {
background-image: url('https://i.ibb.co/pZYVjgQ/testbgm.png');
background-repeat: no-repeat;
background-size: contain;
}
#chart_div2 table {
padding: 11px !important;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Weekly', 80],
// ['Monthly', 80],
]);
var options = {
width: 640, height: 420,
// redFrom: 90, redTo: 100,
// yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
setInterval(function() {
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 13000);
}
</script>
</head>
<body style="height: 90vh;display: flex; justify-content:center; flex-direction: column; align-items:center; background: #AARRGGBB">
<div id="chart_div" style="width: 1000px; height: 1000px;" class="container-fluid"></div>
<!--<img src="https://i.ibb.co/pZYVjgQ/testbgm.png" alt="team" border="0"style="width:40%">-->
</body>
</html>
сильный текст