谷歌图表:通过日期而不使用日期()?

时间:2021-06-06 12:54:24

Summary

总结

I'm trying to make a line graph in Google Charts with dates as the X axis. I have that all sorted but it requires passing dates as Date objects, i.e. new Date(2005, 3, 13). Is there any way I can pass it as a Unix timestamp or perhaps a string instead?

我想在谷歌图表中画一个以日期为X轴的线形图。我已经对它们进行了排序,但是它要求将日期作为日期对象传递,比如new Date(2005年,3,13年)。有什么方法可以将它作为Unix时间戳或字符串传递给它吗?

More Details

更多的细节

So I have a bunch of data in PHP that I want to graph. I'm taking the data and arranging it into an array in the format that will produce the correct JSON format when run through json_encode(), per the Google data docs:

PHP中有很多数据我想要画出来。根据谷歌数据文档,我将数据放在一个数组中,在json_encode()中运行时,该数组的格式将生成正确的JSON格式:

$graph_data = array(
    'cols' => array(
        array(
            'id' => 'date',
            'label' => 'Date',
            'type' => 'datetime',
        ),
        array(
            'id' => 'odometer',
            'label' => 'Miles',
            'type' => 'number',
        ),
    ),
    'rows' => array(
        array(
            'c' => array(
                array( 'v' => 1331479502 ),
                array( 'v' => 56872 ),
            ),
        ),
        array(
            'c' => array(
                array( 'v' => 1331375984 ),
                array( 'v' => 55324 ),
            ),
        ),
        array(
            'c' => array(
                array( 'v' => 1328966460 ),
                array( 'v' => 54244 ),
            ),
        ),
    ),
);

{"cols":[{"id":"date","label":"Date","type":"datetime"},{"id":"odometer","label":"Miles","type":"number"}],"rows":[{"c":[{"v":1331479502},{"v":56872}]},{"c":[{"v":1331375984},{"v":55324}]},{"c":[{"v":1328966460},{"v":54244}]}]}

{“关口”:[{ " id ":“日期”、“标签”:“日期”、“类型”:datetime " },{ " id ":“里程计”,“标签”:“英里”、“类型”:“数量”}],“行”:[{“c”:[{“v”:1331479502 },{“v”:56872 }]},{“c”:[{“v”:1331375984 },{“v”:55324 }]},{“c”:[{“v”:1328966460 },{“v”:54244 }]}]}

So I have the JSON creation down but the API wants dates passed as a Date object and not a number (or string). It throws an error right now but if I change it from datetime to number, it graphs perfectly so I know my JSON format is correct.

因此,我已经创建了JSON,但是API希望日期作为日期对象而不是数字(或字符串)传递。它现在抛出一个错误,但是如果我将它从datetime更改为number,它会完美地显示出来,这样我就知道JSON格式是正确的。

Is there anything I can do to have the API accept Unix timestamps, or perhaps a string of some sort?

要让API接受Unix时间戳或者某种字符串,我能做些什么呢?

As I typed this out, I realized that perhaps I could use some Javascript to walk the JSON object and replace the timestamps with Date objects, but it'd be nice if I didn't have to do any data manipulation via Javascript.

当我输入它时,我意识到也许我可以使用一些Javascript来遍历JSON对象,并用日期对象替换时间戳,但是如果我不需要通过Javascript进行任何数据操作,那就更好了。

EDIT

编辑

I got part of the way there by setting the type to number and passing dates like this:

我通过将类型设置为number并通过这样的日期获得了部分方法:

        array(
            'c' => array(
                array( 'v' => 1331479502, 'f' => 'March 11th, 2012' ),
                array( 'v' => 56872 ),
            ),
        ),

That makes the f value show up in the tooltip (yay!) but the v value is still used for the axis labels. Hmm.

这使得f值出现在工具提示中(yay!),但是v值仍然用于轴标签。嗯。

EDIT #2

编辑# 2

Looks like there might be some potential in using DataView to transform a number timestamp into a date but I haven't figured it out yet.

看起来使用DataView将一个数字时间戳转换为一个日期可能有一些潜力,但我还没有弄明白它。

2 个解决方案

#1


9  

I ended up just walking the JSON array and replacing the timestamps with Date objects. It was easier than I expected it to be:

最后,我只是遍历JSON数组,并用Date对象替换时间戳。这比我想象的要容易得多:

for ( var i = 0; i < json.rows.length; i++ ) { 
    json.rows[i].c[0].v = new Date( json.rows[i].c[0].v * 1000 );
}

#2


0  

I used string instead of date type when displayed Date on x-axis. It allowed me to customize DateTime display on server side by formatting it as a string and also there is no need in tricks like creating date object from some string or a numeric values in javascript.

在x轴上显示日期时,我使用了字符串而不是日期类型。它允许我通过将DateTime格式化为字符串来定制服务器端显示的DateTime,而且不需要使用一些技巧,比如从字符串或javascript中的数值创建date对象。

#1


9  

I ended up just walking the JSON array and replacing the timestamps with Date objects. It was easier than I expected it to be:

最后,我只是遍历JSON数组,并用Date对象替换时间戳。这比我想象的要容易得多:

for ( var i = 0; i < json.rows.length; i++ ) { 
    json.rows[i].c[0].v = new Date( json.rows[i].c[0].v * 1000 );
}

#2


0  

I used string instead of date type when displayed Date on x-axis. It allowed me to customize DateTime display on server side by formatting it as a string and also there is no need in tricks like creating date object from some string or a numeric values in javascript.

在x轴上显示日期时,我使用了字符串而不是日期类型。它允许我通过将DateTime格式化为字符串来定制服务器端显示的DateTime,而且不需要使用一些技巧,比如从字符串或javascript中的数值创建date对象。