從mysql的d3.js格式化日期

Question

我想繪製一個圖表使用谷歌圖表，我的數據存儲在MySQL中。我的數據在MySQL表中的列是「timestamp」[存儲CURRENT_TIMESTAMP（）]，「Side A Score」和「Side B Score」。

我採用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似乎要求日期格式不同。我該如何解決這個問題？

Answer 1

應該引用日期字符串。我很困惑，你在控制檯上沒有任何錯誤抱怨這條線。

簡單的辦法就是

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，所以請你記住，你必須適應的語法。