日期范围谷歌图表工具

Question

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

数据以 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），类似于第三个示例here。

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

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

谢谢！

Answer 1

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

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

更新

对于interactive line chart，轴范围可以这样设置（灵感来自this thread）：

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

也许您可以使用different chart type？ Dygraphs 看起来可能会有所帮助。

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