我正在尝试使用谷歌图表在折线图上显示数据。数据显示良好,但我想设置要显示的日期范围。
数据以JSON文本格式从数据库发送:
{
"cols": [
{"label": "Week", "type": "date"},
{"label": "Speed", "type": "number"},
{"type":"string","p":{"role":"tooltip"}},
{"type":"string","p":{"role":"tooltip"}},
{"type":"string","p":{"role":"tooltip"}},
{"type":"string","p":{"role":"tooltip"}},
],
"rows": [
{"c":[{"v": "Date('.$date.')"},{"v": null},{"v": null},{"v": null},{"v": null},{"v": null}]},
{"c":[{"v": "Date('.$date.')"},{"v": null},{"v": null},{"v": null},{"v": null},{"v": null}]}
]
}
数据按周或月显示(为了便于阅读,null
),例如本周:
2012, 02, 06
2012, 02, 07
2012, 02, 09
数据不是为一周中的每一天设置的,因此在本例中只显示上面的日期。我想展示的是一周的开始(201202/06)到一周的结束(201202/12),类似于这里的第三个例子。
我通过检查数据库中是否存在日期来显示整个星期,如果不追加额外的一行将使数据为空,这意味着这一行不连续,日期不按顺序排列。
有人能给我什么建议吗?我该怎么做?
谢谢!
您是否尝试将缺少的日期保留为缺少的日期(即,让数据库返回2个值而不是7个值)?
连续轴应该处理丢失的日期,您只需要设置从一周开始到结束的轴范围。
更新
对于交互式折线图,轴范围可以这样设置(受此线程启发):
hAxis: {...
viewWindowMode: 'explicit',
viewWindow: {min: new Date(2007,1,1),
max: new Date(2010,1,1)}
...}
参见http://jsfiddle.net/REgJu/
"我通过检查数据库中是否存在日期来显示整个星期,如果不添加额外的一行将使数据为空,这意味着这一行不是连续的,日期不按顺序排列。"
我认为你走在了正确的轨道上——你只需要用一种稍微不同的方式来做。我有下面这样的功能,使数据连续。
$data = array(
1 => 50,
2 => 75,
4 => 65,
7 => 60,
);
$dayAgoStart = 1;
$daysAgoEnd = 14;
$continuousData = array();
for($daysAgo=$daysAgoStart ; $daysAgo<=$daysAgoEnd ; $daysAgo++){
if(array_key_exists($daysAgo, $data) == true){
$continuousData[$daysAgo] = $data[$daysAgo];
}
else{
$continuousData[$daysAgo] = 0;
}
}
continuousData现在将保持:
$data = array(
1 => 50,
2 => 75,
3 => 0,
4 => 65,
5 => 0,
6 => 0,
7 => 60,
8 => 0,
9 => 0,
10 => 0,
11 => 0,
12 => 0,
13 => 0,
14 => 0,
);
按照这个顺序,然后数据就可以在图表中使用,没有任何间隙。
也许您可以使用不同的图表类型?Dygraph看起来可能会有所帮助。
否则,您可能需要编写自己的自定义图表类型。