mysql - 从 mysql 格式化 d3.js 的日期

Question

我正在尝试使用谷歌图表绘制图表，我的数据存储在mysql中。我在mysql表中的数据列是“timestamp”[存储CURRENT_TIMESTAMP()]、“A方分数”和“B方分数”。

我使用 php 将数据回显到 Google 可视化数据表中，如下所示:

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

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

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

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

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，因此请记住，您必须调整语法。