gpt4 book ai didi

javascript - 谷歌仪表不显示

转载 作者:行者123 更新时间:2023-12-03 06:10:45 24 4
gpt4 key购买 nike

我正在尝试创建一个基于 HTML 的仪表板,从中我们可以监控工作周围不同服务器机柜的温度。我的问题是我根本无法显示仪表。下面是我迄今为止所拥有的代码。

谢谢

<小时/>
<!DOCTYPE html?>
<html>
<head>
<title>BCS Temperature Monitor</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"/>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']]);
google.charts.setOnLoadCallback(drawChart);

function drawChart (){

var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);

var options = {
width: 400, height: 120,
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);

setInterval(function() {
data.setValue(1, 1, 40 + Math.round(60 * Math.random)));
chart.draw(data, options);
}, 5000);

setInterval(function() {
data.setValue(2, 1, 60 + Math.round(20 * Math.random)));
chart.draw(data, options);
}, 26000);
}

</script>

</head>

<body>

<div class="page">

<div class="wrapper" id="header">
<div id="chart_div" style="width: 400px; height: 120px;">Hello</div>
</div>

<div class="wrapper" id="content">
</div>

<div class="wrapper" id="footer">
</div>


</div>

</body>

最佳答案

有一些小错误,请参阅此处的工作演示: http://codepen.io/anon/pen/wzBArA

  • 脚本标签不能用 <script /> 关闭,您必须使用 <script></script>
  • 您调用的电话 google.charts.load使用了第二个]而不是}
  • 您的setInterval方法有一个额外的 ) Math.random之后打电话

关于javascript - 谷歌仪表不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39332443/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com