javascript - Google Charts 时间线 - PHP 数组作为输入

Question

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

或者如果我应该将其描述为一个例子:

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

Answer 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 二维数组传递给 JavaScript)，您可能会发现更容易找到现有 Material 。以下是有关该主题的现有 Stack Overflow 问题的示例:

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

类似的还有很多。