Question

我正在尝试使用谷歌图表绘制图表，我的数据存储在mysql中。 mysql表中我的数据列是“timestamp”[存储CURRENT_TIMESTAMP（）]，“Side A Score”和“Side B Score”。

我使用php将数据回显到谷歌可视化DataTable中：

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

但我不知道该图库是否需要这种字符串或Date对象。因此，如果这不起作用，请将字符串传递给正确的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]
]);

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

从mysql格式化d3.js的日期

1 个答案: