日期:2014-05-16  浏览次数:20377 次

google js 实现Dashboard

???? 通过Google Chart Tools提供的图表功能实现如下:

? 地址如下:

? http://code.google.com/intl/zh-CN/apis/chart/interactive/docs/gallery/gauge.html

?

效果如下图:

代码如下:

<html>?
?
<head>?
? ?
<script type='text/javascript' src='https://www.google.com/jsapi'></script>?
? ?
<script type='text/javascript'>?
? ? ? google
.load('visualization', '1', {packages:['gauge']});?
? ? ? google
.setOnLoadCallback(drawChart);?
? ? ?
function drawChart() {?
? ? ? ?
var data = new google.visualization.DataTable();?
? ? ? ? data
.addColumn('string', 'Label');?
? ? ? ? data
.addColumn('number', 'Value');?
? ? ? ? data
.addRows([?
? ? ? ? ?
['Memory', 80],?
? ? ? ? ?
['CPU', 55],?
? ? ? ? ?
['Network', 68]?
? ? ? ?
]);?
?
? ? ? ?
var options = {?
? ? ? ? ? width
: 400, height: 120<