Question

我有谷歌可视化数据表并且工作得很好，但我的问题是表的宽度。当我点击我在图像上显示时，我调用函数drawTable（）;然后我明白了：

enter image description here

正如您所看到的，表格没有宽度：100％;

但是当我再次点击＆＃34; Mehanizacija＆＃34;正如你在照片上看到的那样，我再次调用函数drawTable（）;然后一切都好：

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'}
    });

};

Answer 1

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

尝试添加＆＃34; ready＆＃34;表的事件处理程序，用于更改表中内部<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%';
    }
});

在创建表之后但在绘制之前将事件处理程序添加到代码中。

响应式谷歌可视化数据表

1 个答案: