时间戳

首页 > 解决方案 > 为 Google Chart Timeline 解析来自 Laravel/PHP 的数据

php - 为 Google Chart Timeline 解析来自 Laravel/PHP 的数据

问题描述

这是来自 Google Charts Timeline 的带有静态数据的示例代码。我想知道如何从 Laravel 数据集中添加 dataRows。 

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.3');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
     ]);

    var options = {
      timeline: { colorByRowLabel: true },
      backgroundColor: '#ffd'
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.3" style="height: 150px;"></div>

标签： phplaravelgoogle-visualization

解决方案

从另一个线程找到了一个完美的解决方案。修改代码以适应 Laravel

在 PHP 中使用时间轴 Google Chart API - 日期/时间格式问题

推荐阅读