0

我在这里使用 google 可视化图表 api：https ://developers.google.com/chart/interactive来制作似乎运行良好的服务器正常运行时间图。

但是我希望用户能够选择一个日期范围，然后重新绘制图表，而无需刷新浏览器。我对此有一个小问题。

我首先使用初始数据绘制图表，然后如果用户更改日期范围，则应重新绘制此图表。我尝试用一​​些示例数据重绘，效果很好。但是我似乎无法让它与更新的数据一起使用。

现在在我从数据库中获取数据的 php 文件中，我返回此期间的平均正常运行时间以及该期间的总正常运行时间，如下所示：

/*mysql query striped*/
$uptime_result = mysql_query($query, $connection) or die(mysql_error());


$uptime_data = "['Day',   'Uptime'],";
while ($items = mysql_fetch_array($uptime_result)){
    $uptime_data.="['{$items['date']}',{$items['uptime']}], ";
}

// get average uptime
/*mysql query striped*/
$uptime_result = mysql_query($query, $connection) or die(mysql_error());

$result_array = mysql_fetch_array($uptime_result);
$avg_uptime = round($result_array['AVG(uptime)'],2);

echo "{\"data\":\"{$uptime_data}\",\"average\":$avg_uptime}";

输出如下：

{"data":"['Day', 'Uptime'],['2012-05-31',100.00], ['2012-06-01',100.00], ['2012-05-  22',99.65], ['2012-05-21',99.65], ['2012-05-20',100.00], ['2012-05-31',100.00], ['2012-05-30',100.00], ['2012-05-29',100.00], ['2012-05-28',100.00], ['2012-05-27',100.00], ['2012-05-26',100.00], ['2012-05-25',100.00], ['2012-05-24',100.00], ['2012-05-23',100.00], ['2012-05-19',100.00], ['2012-05-18',100.00], ['2012-05-17',100.00], ['2012-05-16',100.00], ['2012-05-15',100.00], ['2012-05-14',100.00], ['2012-05-13',100.00], ['2012-05-12',100.00], ['2012-05-11',100.00], ['2012-05-10',100.00], ['2012-05-09',100.00], ['2012-05-08',100.00], ['2012-05-07',100.00], ['2012-06-02',100.00], ['2012-06-03',100.00], ['2012-06-04',100.00], ","average":99.98}

即具有两个变量数据和平均值的 JSON 数组。我可以这样独立地获取这两个：

$(function(){
            $('#from,#to').focusout(function(){

            var start=$('#from').val();
            var end=$('#to').val();
            $.ajax({
                type: 'POST',
                data: ({from : start, to : end, id : <?php echo $id; ?>}),
                url: 'fetchuptime.php',
                success: function(data) {
                     //7 reulst goes here
                    //var json = data;
                    var obj = jQuery.parseJSON(data);
                     $('#uptime_span').html(obj.average +" %");
                     $('#test').html(data);
                     chart_data = google.visualization.arrayToDataTable([
                            obj.data
                        ]);
                        var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
                        ac.draw(chart_data, {
                            colors : ['#00DB00'],
                            title : '',
                            isStacked: false,
                            width: 570,
                            height: 400,
                            'chartArea': {'width': '88%', 'height': '90%'},
                            hAxis: {minValue: 0,showTextEvery: 6, slantedText: false},
                            vAxis: {  
                                viewWindowMode:'explicit',
                                viewWindow:{
                                    max:100,
                                    min:90.65
                                }
                            },
                            pointSize: 3,
                            legend: {position: 'none'}
                        });

          }
        });
    });
});

例如。obj.average 和 obj.data 给了我两个字符串。但是，这似乎不起作用，我猜数据没有正确传递。

我已经测试了实际输出数据（例如 obj.data）的格式是否正确，因为我尝试静态插入它。

所以我显然在这里做错了，我认为这是因为我正在传递一个字符串，而谷歌图表需要一个数组，试图以各种方式修复它，但还没有发现任何工作。

谁能帮我解决这个问题？

4

1 回答 1

0

您的 JSON 格式是有效的，但可能不是您想要的：

{"data":"['Day', 'Uptime'],['2012-05-31',100.00] ... ['2012-06-04',100.00], ", "average":99.98}

这表示一个对象，其字段名为data，其值为字符串（如您所说）。您可能想要做的是使其成为服务器端的阵列。使用方括号代替双引号。还有一个必须删除的尾随逗号。

{"data":[['Day', 'Uptime'],['2012-05-31',100.00] ... ['2012-06-04',100.00]], "average":99.98}
于 2012-06-05T22:00:14.210 回答