日期范围 Google 图表工具

Question

我正在尝试使用 Google Charts 在折线图上显示数据。数据显示正常，但我想设置要显示的日期范围。

数据以 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 

数据未设置为一周中的每一天，因此，在此示例中仅显示上述日期。我想显示的是本周开始 (2012, 02, 06) 到周末 (2012, 02, 12) 类似于第三个示例 此处。

我设法通过检查数据库中是否存在日期来显示整周，如果不附加额外的行将为空数据，但这意味着该行不连续并且日期不按顺序排列。

有人可以就我如何去做这件事提供任何建议吗？

谢谢！

Answer 1

您是否尝试将缺失的日期保留为缺失的日期（即让数据库返回 2 个值而不是 7 个值）？

连续轴应该处理缺失的日期，您只需设置 轴范围从一周的开始到结束。

更新

交互式折线图 a> 轴范围可以这样设置（受 此帖子）：

hAxis: {...
        viewWindowMode: 'explicit',
        viewWindow: {min: new Date(2007,1,1),
                     max: new Date(2010,1,1)}
        ...}

请参阅 http://jsfiddle.net/REgJu/

Answer 2

“我设法通过检查数据库中是否存在日期来显示整周，如果不附加额外的行将使数据为空，但这意味着该行不连续并且日期不按顺序排列。”

我认为你走在正确的轨道上，你只需要以稍微不同的方式来做。我有像下面这样的函数来使数据连续。

$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,
);

，然后可以在图表中使用数据而没有任何间隙。

Answer 3

也许您可以使用不同的图表类型？ Dygraphs 看起来可能会有帮助。

否则，您可能必须编写自己的自定义图表类型。