Question

我有一个包含多个div的页面来保存时间线图表。所有div都根据相关的公司ID给出一个特定的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

为避免该错误，请确保您提供的日期时间正确无误。在某些情况下，如果新的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!!!"]);

Answer 2

当DIV元素不足以显示图表时，我得到完全相同的错误，在X轴上有（日期/时间）值。

在这种情况下，解决方案只是在DIV元素上定义最小宽度。

Answer 3

我有三个不同的错误，包括`Dygraph.TICK_PLACEMENT [a]是

  由于谷歌时间线宽度问题，
undefined`;


＆＃34; Dygraph.TICK_PLACEMENT [a]未定义＆＃34;在Ipad Safari上

＆＃34;无法阅读财产＆＃39; datefield＆＃39;未定义＆＃34;在缩小的Chrome窗口

＆＃34;无法获得财产＆＃39; datefield＆＃39;未定义或空引用＆＃34;上

缩小IE窗口

我通过设置时间轴的最小宽度找到了解决方法。 900分钟似乎足以满足我的申请。

我的代码：

public class EventObject {
     private double points;
     public double getPoints(){ return points; }
     // ... rest of class
}

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

3 个答案: