javascript - 使用谷歌时间线图表的多个时间线图表

Question

我有一个包含多个 div 的页面来保存时间线图表。根据相关公司 ID，所有 div 都会被赋予特定的 ID，因此

<div id="1"></div>
<div id="2"></div>

等等

然后，我通过数组创建循环，并使用以下代码将时间线图表附加到每个 div

>     <script type="text/javascript">
> 
>  var hauliers = <?php echo json_encode($hlist)?>;  var orders = <?php
> echo json_encode($orders)?>;    $(document).ready(function(){ 
>   $.each(hauliers,function(key,val){
> 
>       $.ajax({
>           url: 'https://www.google.com/jsapi?callback',
>           cache: true,
>           dataType: 'script',
>           success: function(){
>       google.load('visualization', '1', {packages:['timeline'], 'callback' : function()
>         {
>          //create data table object
>          var container = document.getElementById('chart_'+val.haulier_id);
>          var chart = new google.visualization.Timeline(container);           
>            var dataTable = new google.visualization.DataTable();
>          
>           dataTable.addColumn({ type: 'string', id: 'Vehicle' });
>           dataTable.addColumn({ type: 'string', id: 'Description' });
>           dataTable.addColumn({ type: 'date', id: 'Start' });
>           dataTable.addColumn({ type: 'date', id: 'End' });
>           dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
> 
>           //add data to the table             $.each(orders,function(key,val){
>               dataTable.addRow([val.vehicle,val.order_id,new Date(val.req_col_time),new Date(val.req_del_time),"Status: <br>some
> more stuff here!!!"]);            });
> 
>           var view = new google.visualization.DataView(dataTable);
>           view.setColumns([0,1,2,3]);    
>     
>     
>           chart.draw(view);    
>     
>           function myHandler(e){
>               if(e.row != null){
>                       var orderno = parseInt(dataTable.getValue(e.row,4));
>                       content = '<div style="width:200px; height:200px; background-color:green; font-weight:bold;">'+orderno+'</div>';
>                       $(".google-visualization-tooltip").html(content).css({width:"auto",height:"auto"});
>               }        
>           }
>     
>           google.visualization.events.addListener(chart, 'onmouseover', myHandler);
> 
>               }
>           });
>           return true;
>           }       });     });  });
> 
> </script>

当我在 Chrome 中运行它时，它工作正常，当我在 Firefox 中运行它时，我收到以下错误

Dygraph.TICK_PLACEMENT[a] is undefined

关于为什么会发生这种情况有什么想法吗？

Answer 1

为避免该错误，请确保您提供的日期时间正确。在某些情况下，如果 new Date() 参数不是整数类型(如果是毫秒)或日期字符串，则该函数会返回无效日期，并且 Google 时间线会返回该错误。

我建议:

var colTime = parseInt(val.req_col_time); /* assuming that val.req_col_time is in milliseconds */
colTime = new Date(colTime);

var delTime = parseInt(val.req_del_time); /* assuming that val.req_del_time is in milliseconds */
delTime = new Date(delTime );

dataTable.addRow([val.vehicle,val.order_id,colTime,delTime),"Status: <br>some more stuff here!!!"]);