mysql中d3.js的格式化日期

我试图用谷歌图表绘制一个图表，我的数据存储在mysql中。mysql表中我的数据的列是“timestamp”[它存储当前的_timestamp（）]，“Side A Score”和“Side B Score”

我使用php将数据回送到google visualization数据表中，如下所示：

 <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>

//加载可视化API和piechart包。
load（'visualization'，'1.0'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
//创建并填充数据表的回调，
//实例化饼图，传入数据并
//画它。
函数绘图图（）{
//创建数据表。
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] 
]);
//设置图表选项
变量选项={'title'：'Score Chart'，
“宽度”：400，
‘高度’：300}；
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}

---

但是，它不起作用，我看不到任何视觉输出。我想我在datetime部分犯了一个错误，因为谷歌似乎要求日期格式不同。我该如何解决这个问题？

应该引用日期字符串。我很困惑，你的控制台中没有任何错误抱怨这一行

最简单的方法是

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]
]);

但我不知道图形库是否需要这种字符串或日期对象。因此，如果这不起作用，请将字符串传递给适当的日期构造函数

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]
]);

---

您的示例使用的是Google Charts而不是D3，因此请记住，您必须调整语法。

抱歉@amenadiel-您说得对，我使用的是Google Charts。您不应该使用Date对象的字符串解析-每个浏览器解析字符串的方式不同，即使来自不同地区的用户使用同一浏览器也会得到不同的日期。手动将日期和时间解析为年、月、日、小时、分钟和秒，并从中构建一个日期对象（请记住，您必须调整月份，因为javascript日期索引月份从0开始[例如，一月是0，而不是1]）。我不同意。ISO 8601定义了日期时间的标准。它应该是[YYYY]-[MM]-[DD]T[hh]：[MM]：[ss]但是根据ISO 8601:2004规范的注释4.3.2，省略T字符是可以的。我使用了新的日期方法（你的第二段），它显然与google的解析方法很好地配合。谢谢！