响应谷歌可视化数据表

我有谷歌可视化数据表和工作良好，但我的问题是与宽度的表。当我单击我在图像上显示时，我调用函数drawTable（）;然后我得到这个：响应谷歌可视化数据表

enter image description here

，正如你所看到的表不具有宽度：100％;

但是当我再次点击“Mehanizacija”，你可以在照片上看到我再次调用函数drawTable（）;然后是一切OK：

enter image description here

那么，什么是数据表宽度的问题...为什么我需要调用函数两次drawTable（）很好地工作？有什么办法解决这个问题？所以只需一个clikc就可以获得宽度为100％的数据...？

这里是我的功能drawTable();：

 function drawTable() { 


    // Create and populate the data table. 
    var JSONObject = $.ajax({ 
        url: 'call_radnici.php', // make this url point to the data file 
        dataType: 'json', 
        data:{ajdi:ajdi}, 
        async: false, 
        type: 'POST', 
       }).responseText; 

    var data = new google.visualization.DataTable(JSONObject, 0.5); 



     data.addColumn('string', ''); 
     for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) { 
     var mc = data.getNumberOfColumns()-1; 
data.setValue(y, mc, '<div data-toggle="tooltip" data-placement="top" title="Delete this day data"><i class="fa fa-trash-o" ></i></div>'); 

     } 


    var table = new google.visualization.Table(document.getElementById('tplradnici')); 



    table.draw(data, {'allowHtml': true, cssClassNames: { 
     'headerRow': 'zaglavlje1', 
     'tableRow': 'red', 
     'oddTableRow': 'red', 
     'selectedTableRow': 'orange-background large-font', 
     'hoverTableRow': 'prekoreda', 
     'headerCell': 'gold-border', 
     'tableCell': 'cell', 
     'rowNumberCell': 'underline-blue-font'} 
    }); 

};

来源

2014-06-25 Andrew

默认情况下，可视化表绘制在容器div的宽度的100％。容器的像素宽度固定为<table>元素的内联样式（即，如果您的容器div为500px宽，则<table>元素将具有style="width:500px;"）。我认为你的表格绘制的初始绘制宽度小于100％的唯一原因是，如果你将它绘制在隐藏的div中（这打破了Visualization API的尺寸测量）;这通常发生在表格绘制在标签界面中时。

尝试添加的是改变了表内<table>元素的样式表“就绪”事件处理程序：在创建表后

google.visualization.events.addListener(table, 'ready', function() { 
    var tArr = document.querySelectorAll('#tplradnici table'); 
    for (var i = 0; i < tArr.length; i++) { 
     tArr[i].style.width = '100%'; 
    } 
});

添加事件处理程序的代码，但绘图前。

来源

2014-06-26 02:53:11 asgallant

响应谷歌可视化数据表

回答

相关问题