从mysql的d3.js格式化日期

我想绘制一个图表使用谷歌图表，我的数据存储在MySQL中。我的数据在MySQL表中的列是“timestamp”[存储CURRENT_TIMESTAMP（）]，“Side A Score”和“Side B Score”。从mysql的d3.js格式化日期

我采用php回声数据输出到一个可视化谷歌数据表为这样：

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 

    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1.0', {'packages':['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 


    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and 
    // draws it. 
    function drawChart() { 

    // Create the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('datetime', 'Date'); 
    data.addColumn('number', 'Side 0 score'); 
    data.addColumn('number', 'Side 1 score'); 
    data.addRows([ 
    [2014-06-15 09:40:22 , 79.5 , 20.5] , [2014-06-15 12:57:15 , 79.5 , 20.5] , [2014-06-15 12:58:48 , 79.5 , 20.5] , [2014-06-15 12:59:21 , 79.5 , 20.5] , [2014-06-15 13:00:46 , 79.5 , 20.5] , [2014-06-15 13:00:51 , 79 , 21.5] , [2014-06-15 13:02:39 , 79 , 21.5] , [2014-06-15 18:39:54 , 79 , 21.5] , [2014-06-15 18:43:01 , 78.75 , 21.25] , [2014-06-15 18:45:35 , 78.8 , 21.2] , [2014-06-15 18:46:18 , 78.8 , 21.2] , [2014-06-15 18:50:44 , 79 , 21] , [2014-06-15 18:50:52 , 79.3 , 20.7] , [2014-06-15 18:51:02 , 79.3 , 20.7] , [2014-06-15 18:54:02 , 79.3 , 20.7] , [2014-06-15 19:03:27 , 79.3 , 20.7] , [2014-06-15 19:03:38 , 79.3 , 20.7] , [2014-06-15 19:04:49 , 79.3 , 20.7] , [2014-06-15 19:05:07 , 79.3 , 20.7] , [2014-06-15 19:05:27 , 79.3 , 20.7] , [2014-06-15 19:05:55 , 79.3 , 20.7] , [2014-06-15 19:06:33 , 79.3 , 20.7] , [2014-06-15 19:06:57 , 79.3 , 20.7] , [2014-06-15 19:07:43 , 79.3 , 20.7] , [2014-06-15 19:07:45 , 79.3 , 20.7] , [2014-06-15 19:07:52 , 79.3 , 20.7] , [2014-06-15 21:23:10 , 79.3 , 20.7] , [2014-06-15 21:23:16 , 79.3 , 20.7] , [2014-06-15 21:23:31 , 79.3 , 20.7] , [2014-06-15 21:23:53 , 79.3 , 20.7] , [2014-06-15 21:24:17 , 79.3 , 20.7] , [2014-06-15 21:25:21 , 79.3 , 20.7] , [2014-06-15 21:27:25 , 79.3 , 20.7] , [2014-06-15 21:28:03 , 79.3 , 20.7] , [2014-06-15 21:28:10 , 79.3 , 20.7] , [2014-06-15 21:34:55 , 79.3 , 20.7] , [2014-06-15 21:35:13 , 79.3 , 20.7] , [2014-06-16 21:25:53 , 79.3 , 20.7] , [2014-06-16 21:26:02 , 79.3 , 20.7] , [2014-06-16 21:26:08 , 79.3 , 20.7] , [2014-06-16 21:26:39 , 79.3 , 20.7] , [2014-06-16 21:27:36 , 79.3 , 20.7] , [2014-06-16 21:57:06 , 79.3 , 20.7] , [2014-06-16 21:58:00 , 79.3 , 20.7] , [2014-06-16 21:59:14 , 79.3 , 20.7] , [2014-06-16 22:00:17 , 79.3 , 20.7] , [2014-06-16 22:01:44 , 79.3 , 20.7] , [2014-06-16 22:03:40 , 79.3 , 20.7] , [2014-06-16 22:05:04 , 79.3 , 20.7] , [2014-06-16 22:07:42 , 79.3 , 20.7] , [2014-06-16 22:08:17 , 79.3 , 20.7] , [2014-06-16 22:09:15 , 79.3 , 20.7] , [2014-06-16 22:11:47 , 79.3 , 20.7] , [2014-06-16 22:12:45 , 79.3 , 20.7] , [2014-06-16 22:14:13 , 79.3 , 20.7] , [2014-06-16 22:17:22 , 79.3 , 20.7] , [2014-06-16 22:17:31 , 79.3 , 20.7] , [2014-06-16 22:19:10 , 79.3 , 20.7] , [2014-06-16 22:20:10 , 79.3 , 20.7] , [2014-06-16 22:20:27 , 79.3 , 20.7] , [2014-06-16 22:20:51 , 79.3 , 20.7] , [2014-06-16 22:20:57 , 58.6 , 41.4] , [2014-06-16 22:32:58 , 58.6 , 41.4] , [2014-06-16 22:33:06 , 57.9 , 42.1] , [2014-06-16 22:36:06 , 58.4 , 41.6] , [2014-06-16 22:48:26 , 58.4 , 41.6] 
    ]); 

    // Set chart options 
    var options = {'title':'Score Chart', 
       'width':400, 
       'height':300}; 

    // Instantiate and draw our chart, passing in some options. 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
} 
</script> 

<div id="chart_div" style="width:300; height:300"></div>

然而，它不工作和我没有看到任何的视觉输出。我认为我对日期时间部分犯了一个错误，因为google似乎要求日期格式不同。我该如何解决这个问题？

来源

2014-06-17 GK79

应该引用日期字符串。我很困惑，你在控制台上没有任何错误抱怨这条线。

简单的办法就是

data.addRows([ 
    ['2014-06-15 09:40:22' , 79.5 , 20.5], 
    ['2014-06-15 12:57:15' , 79.5 , 20.5], 
    ['2014-06-15 12:58:48' , 79.5 , 20.5], 
    ['2014-06-15 12:59:21' , 79.5 , 20.5], 
    ['2014-06-15 13:00:46' , 79.5 , 20.5] 
]);

但我不知道这是否图形库的预期，那种字符串或Date对象。所以，如果不工作，将字符串传递给正确的日期构造

data.addRows([ 
    [new Date('2014-06-15 09:40:22') , 79.5 , 20.5], 
    [new Date('2014-06-15 12:57:15') , 79.5 , 20.5], 
    [new Date('2014-06-15 12:58:48') , 79.5 , 20.5], 
    [new Date('2014-06-15 12:59:21') , 79.5 , 20.5], 
    [new Date('2014-06-15 13:00:46') , 79.5 , 20.5] 
]);

你的例子是使用谷歌图表，而不是D3，所以请你记住，你必须适应的语法。

来源

2014-06-17 11:56:10 amenadiel

抱歉@amenadiel - 你是对的，我正在使用谷歌图表。 – GK79

是否有效？如果是，哪一个？ – amenadiel

您不应该使用Date对象的字符串解析 - 每个浏览器对字符串进行不同的解析，甚至来自使用相同浏览器的不同地区的用户也会得到不同的日期。将日期和时间手动解析为年，月，日，小时，分钟和秒钟，并从这些日期对象中生成日期对象（请记住，您必须调整月份，因为javascript日期索引月份为0 [例如，1月为0 ，而不是1]）。 – asgallant

从mysql的d3.js格式化日期

回答

相关问题