Google Charts Timeline - PHP 数组作为输入答案

【问题标题】：Google Charts Timeline - PHP array as inputGoogle Charts Timeline - PHP 数组作为输入
【发布时间】：2015-03-09 16:05:33
【问题描述】：

我正在绘制一个Google Charts Timeline 绘图，显示位于 MySQL 数据库表中的多个任务的持续时间。使用 PHP 有多种方法可以检索和存储它，例如作为二维数组。但是，有没有办法通过dataTable.addrows() 方法以 Google Charts Timeline 可以处理的方式传递这样一个数组（或其他容易创建的包含对象的数据）？

或者如果我应该将其描述为示例：

function drawChart() {
    // Nothing to see here, move along now...
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    // The column heading can be fixed or variable, this doesnt matter.
    dataTable.addColumn({ type: 'string', id: 'Opgave ID' });
    dataTable.addColumn({ type: 'string', id: 'Opgavetitel' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

    /* I would like to replace the fixed input of dataTable.addRows, with a        
     *variable input, for instance a 2-dimensional PHP-array.
     */
    dataTable.addRows([
            [ '1', 'Some task',        new Date(2015, 3, 9),  new Date(2015, 3, 23) ],
            [ '2', 'Another task',     new Date(2015, 3, 13), new Date(2015, 3, 20) ],
            [ '3', 'A different task', new Date(2015, 3, 16), new Date(2015, 3, 30) ]]);

    // No questions for any of this
    var options = {
            timeline: {showRowLabels: false, singleColor: '#8d8'}
    };

    chart.draw(dataTable, options);
}

【问题讨论】：

看来我的问题不是一般语法，而是如何在 PHP 中格式化日期以使其在json_encode 之后成为正确的语法...
由于问题只是日期格式，我在 StackOverflow 上发了一篇新帖子，专门解决了这个问题。希望这将使回复者和其他有相同问题的人更容易。见：stackoverflow.com/questions/29004501/…
我有同样的问题，但日期和时间。我在这个和下一个你的帖子stackoverflow.com/questions/29004501/… 中尝试了一些建议的解决方案，但它们不起作用。你找到解决这个问题的方法了吗？如果是，您可以在这里分享答案吗？
有效的解决方案是答案 - stackoverflow.com/questions/36233412/…

标签： javascript php mysql arrays google-visualization

【解决方案1】：

通过谷歌快速搜索，我找到了这篇文章：

http://www.dyn-web.com/tutorials/php-js/json/multidim-arrays.php

我不是 PHP 程序员，所以这没有经过测试，但应该可以工作：

<?
$timeData = array(
  array('1', 'Some task', new DateTime('2015-04-09'), new DateTime('2015-04-23')),
  array('2', 'Another task', new DateTime('2015-04-13'), new DateTime('2015-04-20')),
  array('3', 'A different task', new DateTime('2015-04-16'), new Date('2015-04-30))
);
?>
function drawChart() {
    // Nothing to see here, move along now...
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    // The column heading can be fixed or variable, this doesnt matter.
    dataTable.addColumn({ type: 'string', id: 'Opgave ID' });
    dataTable.addColumn({ type: 'string', id: 'Opgavetitel' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

    dataTable.addRows(<? echo json_encode( $timeData ); ?>);

    // No questions for any of this
    var options = {
            timeline: {showRowLabels: false, singleColor: '#8d8'}
    };

    chart.draw(dataTable, options);
}

如果您将搜索范围扩大到更基本的概念（将 PHP 2d 数组传递给 javascript），您可能会发现更容易找到现有材料。以下是关于该主题的现有 Stack Overflow 问题的示例：

Best way to pass a 2d array into JavaScript from PHP?

还有很多类似的。

【讨论】：

终于有时间测试了一下，表格的JSON编码看起来很奇怪：dataTable.addRows([["1","Some task",{"date":"2015-04-09 00:00:00.000000","timezone_type":3,"timezone":"Europe\/Copenhagen"},{"date":"2015-04-23 (...)
好吧，没想到...看起来 Jason 序列化将日期序列化为对象而不是字符串或 JavaScript 日期。我在 .Net 中工作，这是一个已解决的问题（日期被序列化为 JavaScript 日期）。你有几个选择.. 要么将 PHP 中的日期存储为字符串，然后在 JavaScript 中解析它们，要么保持原样并编写一个 JavaScript 函数将它们转换为 JavaScript 日期。不要忘记 JavaScript 中的月份是从零开始的 (March=2)。
我讨厌手机... Jason==JSON。
有没有办法创建日期并将其转换为正确的格式（即与 new Date() 在 JavaScript 中创建的格式相同）？

【解决方案2】：

我在使用 Laravel 6.0 框架时使用 Google Charts Timeline 时遇到了同样的问题。我将查询结果作为关联数组传递给视图文件，并使用json_encode() 将关联数组转换为 JavaScript 数组，然后再转换为对象数组：

<script>

  // create a custom data object to pass into the array
  // the charter array data is of the format:
  // 
  // Array(5)
  // 0: {mn: "2020-02-12 10:03:17", mx: "2022-07-12 10:03:17", cha_booking_id: 1}
  // 1: {mn: "2020-02-12 13:33:07", mx: "2020-10-12 13:33:07", cha_booking_id: 2}
  // 2: {mn: "2020-02-12 13:39:47", mx: "2020-08-12 13:39:47", cha_booking_id: 3}
  // 3: {mn: "2020-04-12 06:21:08", mx: "2020-04-12 06:21:08", cha_booking_id: 4}
  // 4: {mn: "2020-05-12 08:44:24", mx: "2020-07-12 08:44:24", cha_booking_id: 5}

  var data = [];

  charter.forEach(el => {
   var arr = [
    el.cha_booking_id.toString(),
    new Date(
     el.mn.substring(0, 4), // get the year from the date format that is passed
     el.mn.substring(5, 7), // get the month from the date format that is passed
     el.mn.substring(8, 10) // get the day from the date format that is passed
    ),  
    new Date(
     el.mx.substring(0, 4),
     el.mx.substring(5, 7),
     el.mx.substring(8, 10)
    )
  ];

  data.push(arr);

  // The column heading can be fixed or variable, this doesnt matter.
  dataTable.addColumn({ type: 'string', id: 'Opgave ID' });
  dataTable.addColumn({ type: 'string', id: 'Opgavetitel' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });

  dataTable.addRows(data);

  // No questions for any of this
  var options = {
        timeline: {showRowLabels: false, singleColor: '#8d8'}
  };

  chart.draw(dataTable, options);

</script>

【讨论】：