1

我正在使用 Google Charts，并且正在尝试将多个图表添加到一个 json 调用中。

图表样式为gauge.

下面的示例仅适用于一个仪表“CPU”我对图表不是很好，但我确实创建了一个可以更新的工作示例。

我要添加的是另外两个仪表，json 数组名称将是 ram、带宽。所以json看起来像这样{"cpu":0,"ram":0,"bw":0}

我将如何再添加两个仪表？

<div id='chart_div'></div>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script> 
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>

var chart; 
var charts;
var data;

    google.load('visualization', '1', {packages:['gauge']});
    google.setOnLoadCallback(initChart);

function displayData(point) {

    data.setValue(0, 0, 'CPU');
    data.setValue(0, 1, point);
    chart.draw(data, options);

}

function loadData() {

    // variable for the data point
    var c;

    $.getJSON('http://example.com/json.php', function(data) {

    // get the data point
    c = data.cpu;
          displayData(c);


    });

}

function initChart() {

    data = new google.visualization.DataTable();
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addRows(1);

        chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        options = {width: 120, height: 120, greenFrom: 0, greenTo: 50, redFrom: 75, redTo: 100,
            yellowFrom:50, yellowTo: 75, minorTicks: 5};

    loadData();

    setInterval('loadData()', 1000);

}

</script>
4

1 回答 1

2

如果您的数据在表单{"cpu":0,"ram":0,"bw":0}中，那么您可以将其添加到仪表的 DataTable 中，如下所示：

function initChart() {
    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
    var options = {
        width: 120,
        height: 120,
        greenFrom: 0,
        greenTo: 50,
        redFrom: 75,
        redTo: 100,
        yellowFrom:50,
        yellowTo: 75,
        minorTicks: 5
    };

    function drawGauge () {
        $.getJSON('http://example.com/json.php', function(json) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Label');
            data.addColumn('number', 'Value');
            for (x in json) {
                data.addRow([x, json[x]]);
            }
            chart.draw(data, options);
        });        
    }

    setInterval(drawGauge, 1000);
}
google.load('visualization', '1', {packages:['gauge'], callback: initChart});
于 2013-08-27T23:51:37.523 回答