2

我正在尝试使用带注释的时间线和 PHP 通过添加角色来绘制两个不同的时间序列 - 第二个时间序列将有自己的日期时间类型和角色域。这是 index.php 文件：

<script type='text/javascript'>
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChartSeptTEC);
function drawChartSeptTEC(){
var json = $.ajax({
url: "get_json_forecast.php",
dataType: "json",
async: false
}).responseText;
var data = new google.visualization.DataTable(json);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
// setInterval(drawChartSeptTEC, 59000 );
</script>

和服务器端：

<?php
$tempcols=array();
$tempcols[] =array('type' => 'datetime','role' => 'domain');
$tempcols[] =array('type' => 'number','role' => 'data','label'=>'polynomial');
$tempcols[] =array('type' => 'number','role' => 'interval');
$tempcols[] =array('type' => 'number','role' => 'interval');
$tempcols[] =array('type' => 'datetime','role' => 'domain');
$tempcols[] =array('type' => 'number','role' => 'data','label'=>'spectral');

$table['cols'] =  $tempcols;

$rows = array();
$pg_result = pg_query($link,$query);
pg_close($link);
while ($row = pg_fetch_assoc($pg_result)) {
$temp = array();
$correctDateTime = substr_replace($row['time'], ( substr($row['time'],5,2) -1 ) ,5,2);
$temp[] = array('v' => "Date(".$correctDateTime.")");
$temp[] = array('v' => (float) $row['f2poly']);
$temp[] = array('v' => (float) $row['f2polydev']);
$temp[] = array('v' => (float) $row['f2polydev']);
$temp[] = array('v' => "Date(".$correctDateTime.")");
$temp[] = array('v' => (float) $row['f2spec']);  
$rows[] = array('c' => $temp);
} 

$table['rows'] = $rows;
$jsonTable = json_encode($table);

header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
header('Access-Control-Allow-Origin: *');
echo $jsonTable;
?>

控制台错误报告：

错误：每个值列后面可能有一个或两个注释列。第 4 列是日期时间类型。

当我删除第二个域列时，可视化工作。

间隔角色（即误差线）也无法识别。这将问题简化为：我们如何使用 PHP 配置角色？

4

1 回答 1

0

带注释的时间线不支持角色。为了获得结果，需要使用另一种可视化，例如：

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

并绘制数据：

...
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
...

但是，此图表不支持第二个域角色，因此您需要使用一个域（或自变量，例如 x 轴）并使用 y 值null如果域 x 值没有对应的 y 值两个数据集。在这种情况下，如果要使用线条，则需要设置选项：

interpolateNulls: true,

在你的 draw() 函数中。另一种选择是使用比折线图更快的 dygraph。

于 2015-12-15T13:38:59.620 回答