Watch the CPU and memory gauges trong một giây. Chúng di chuyển động.Cách: Tự động di chuyển Google Gauge?
Đoạn mã ví dụ hình dưới đây không di chuyển đồng hồ đo như thế (hoặc ít nhất là khi tôi đã thử nó trong dự án của riêng tôi.)
Làm thế nào để làm cho nó di chuyển động như vậy?
(Ngoài ra, sẽ những đồng hồ đo làm chậm trang web của tôi kết nối với Google? Mặt khác, nó sẽ mang đến bảng xếp hạng của tôi?)
Đoạn mã ví dụ và demo thực tế là khác nhau. Hãy thử thay vào đó:
<html>
<head>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id='chart_div'></div>
<script type="text/javascript">
function Timer(){this.t={};this.tick=function(a,b){this.t[a]=[(new Date).getTime(),b]};this.tick("start")}var loadTimer=new Timer;window.jstiming={Timer:Timer,load:loadTimer};if(window.external&&window.external.pageT)window.jstiming.pt=window.external.pageT;if(window.jstiming)window.jstiming.report=function(g,d){var c="";if(window.jstiming.pt){c+="&srt="+window.jstiming.pt;delete window.jstiming.pt}if(window.external&&window.external.tran)c+="&tran="+window.external.tran;var a=g.t,h=a.start;delete a.start;var i=[],e=[];for(var b in a){if(b.indexOf("_")==0)continue;var f=a[b][1];if(f)a[f][0]&&e.push(b+"."+(a[b][0]-a[f][0]));else h&&i.push(b+"."+(a[b][0]-h[0]))}if(d)for(var j in d)c+="&"+j+"="+d[j];(new Image).src=["http://csi.gstatic.com/csi?v=3","&s=gviz&action=",g.name,e.length?"&it="+e.join(",")+c:c,"&rt=",i.join(",")].join("")};
</script>
<script type="text/javascript">
var csi_timer = new window.jstiming.Timer();
csi_timer.name = 'docs_gauge';
google.setOnLoadCallback(drawChart);
function drawChart() {
csi_timer.tick('load');
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows(3);
data.setValue(0, 0, 'Memory');
data.setValue(0, 1, 80);
data.setValue(1, 0, 'CPU');
data.setValue(1, 1, 55);
data.setValue(2, 0, 'Network');
data.setValue(2, 1, 68);
csi_timer.tick('data');
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
csi_timer.tick('new');
var options = {width: 400, height: 120, redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90, minorTicks: 5};
chart.draw(data, options);
csi_timer.tick('draw');
window.jstiming.report(csi_timer);
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>
</body>
</html>
Trình diễn của họ sử dụng trình tạo số ngẫu nhiên giả để cập nhật biểu đồ. Đó là một chút sai lầm.
Tôi vẽ biểu đồ ban đầu bằng mã của họ và sau đó sử dụng cuộc gọi ajax để tìm nạp dữ liệu được cập nhật dưới dạng chuỗi json - từ php. Sau đó, tôi điền vào bảng dữ liệu và cập nhật biểu đồ với jQuery/javascript. Tôi đã không nhận được xung quanh để làm cho một hướng dẫn đầy đủ nhưng b/c nó không sẵn sàng cho sản xuất ...
Phần khó nhất là nhận dữ liệu của bạn được định dạng chính xác ở phía máy chủ và cho ăn ajax mà không cần thổi lên trình duyệt. Mã có vẻ rất nhanh và khi bạn đang theo dõi máy chủ web, bạn muốn hiển thị hình ảnh ở một nơi khác. Nó hoạt động nhưng, tại thời điểm này, nó vẫn không hoàn toàn không phải là trình duyệt bất khả tri - đó là lý do tại sao tôi đã chọn sử dụng viết lại trong jQuery.
Theo như tôi biết, thứ hạng trang của bạn không có liên quan ...
thông tin tuyệt vời, cảm ơn. –
Tất cả các giải pháp đều sử dụng số được tạo ngẫu nhiên để tạo hiệu ứng đo cho bản demo. Điều gì sẽ xảy ra nếu bạn muốn hiển thị một giá trị thực và làm động nó cùng một lúc? Dưới đây là giải pháp:
function isEven(n) {
return n % 2 == 0;// true|false
}
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);
// Animate Gauges: (ArrayNum(start:0), ColumnInThatArray(start:0), NewValue)
// OR in anoher words(rowIndex, columnIndex, NewValue)
setInterval(function() {
var chartValue = data.getValue(0, 1);
if (isEven(chartValue)){
data.setValue(0, 1, (chartValue + 5));
} else {
data.setValue(0, 1, (chartValue - 5));
}
chart.draw(data, options);
}, 450);// milisecond
setInterval(function() {
var chartValue = data.getValue(1, 1);
if (isEven(chartValue)){
data.setValue(1, 1, (chartValue + 1));
} else {
data.setValue(1, 1, (chartValue - 1));
}
chart.draw(data, options);
}, 600);// milisecond
setInterval(function() {
var chartValue = data.getValue(2, 1);
if (isEven(chartValue)){
data.setValue(2, 1, (chartValue + 3));
} else {
data.setValue(2, 1, (chartValue - 3));
}
chart.draw(data, options);
}, 1000);// milisecond
}
như thế nào này liên quan đến AppEngine? –
@Adam Crossland: Xin lỗi đã không chắc chắn ..... thẻ chính xác cho mã google là gì? –