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年），类似于第三个例子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

“我设法通过检查数据库中是否存在日期来显示整周，如果没有追加额外的行将是空数据，这意味着该行不连续且日期不按顺序。”< / p>

我认为你走在正确的轨道上，你需要以稍微不同的方式做到这一点。我有类似下面的功能来使数据连续。

$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看起来可能会有所帮助。

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

日期范围Google Chart Tools

3 个答案: