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

时间:2015-01-30 09:25:21

标签: javascript google-chrome charts

我有一个包含多个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

关于为什么会发生这种情况的任何想法?

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

我有三个不同的错误,包括`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
}