Google visualization 调整谷歌图表表的滚动条

我的表格上的垂直滚动条悬停在我的数据上。我似乎无法移动垂直滚动条，也无法更改表格的宽度。我甚至试着将第二栏的文字左对齐，但什么也没发生

这是我的桌子：

我必须滚动查看所有数据：

有没有一种方法可以查看我的表格的全部宽度，而不让垂直滚动条悬停在我的第二列上

代码如下：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1.1", { packages: ["table"] });
    google.setOnLoadCallback(drawTable);


    function drawTable() {

        var data = google.visualization.arrayToDataTable([
          ['Researcher Name', 'Number of Submissions'],
           @Html.Raw(rows)]);

        var options = {
            title: ''
        };
        var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));

        var stringFilter = new google.visualization.ControlWrapper({
            controlType: 'StringFilter',
            containerId: 'string_filter_div',
            options: {
                filterColumnIndex: 0
            }
        });
        var table = new google.visualization.ChartWrapper({
            chartType: 'Table',
            containerId: 'table_div',
            options: {
                showRowNumber: false
            }
        });
        dashboard.bind([stringFilter], [table]);
        dashboard.draw(data);
    }
    google.load('visualization', '1', { packages: ['controls'], callback: drawTable });
</script>
<div id="dashboard">
    <div id="string_filter_div"></div>
    <div style="height:450px" id="table_div"></div>
</div>

load（“可视化”、“1.1”、{packages:[“表”]}）；
setOnLoadCallback（drawTable）；
函数drawTable（）{
var data=google.visualization.arrayToDataTable([
[“研究人员姓名”，“提交数量”]，
@Html.Raw（行）]；
变量选项={
标题：“”
};
var dashboard=new google.visualization.dashboard（document.querySelector（“#dashboard”）；
var stringFilter=new google.visualization.ControlWrapper({
controlType:'StringFilter'，
containerId:'string\u filter\u div'，
选项：{
filterColumnIndex:0
}
});
var table=new google.visualization.ChartWrapper({
chartType:'表'，
集装箱运输：“表_div”，
选项：{
showRowNumber:false
}
});
dashboard.bind（[stringFilter]，[table]）；
仪表盘.绘图（数据）；
}
load（'visualization'，'1'，{packages:['controls']，callback:drawTable}）；

表格图表通常只使用默认值就可以很好地工作

尝试从

div

中删除

style=“height:450px”

要将表标题设置为wrap，可以将css类名指定给

headerCell

，该类名可以为空

cssClassNames: {headerCell: 'googleHeaderCell'}

将此css类添加到页面的某个位置

.googleHeaderCell {}

否则，您应该能够直接在

选项中设置不同的
高度
和
宽度
。如前所述，只需记住将其从
div
中删除即可。除非页面上的其他内容挤满了表格

options = {
    cssClassNames: {headerCell: 'googleHeaderCell'},  // be sure to add css
    height: 600,  // no px needed
    width: 800
};

我遇到了与您完全相同的问题，最后通过向表中添加分页选项来解决它。现在我从来没有得到一个垂直滚动条

页面：“启用”，
页面大小：27

对于表格的宽度，您可以在div本身或表格选项中指定宽度，如：

options = {
width: 800

})

始终尝试在div部分保留height:auto，以便表格的高度可以获得默认表格内容。如果您在滚动条中出现溢出并试图消除它，您可以使用CSS

divElement（id/class）{
溢出：隐藏；//用于水平和垂直滚动
或
溢出-x:隐藏；//用于水平滚动
或
overflow-y:hidden；//用于垂直滚动
}

要使文本在表格单元格内保持左对齐或右对齐，可以在表格选项本身中使用CSS：

.align-text{    //class name

文本对齐：左/右；}

var cssClass= { 
'tableCell': 'align-text',
};

/****表选项****/

选项={
cssClassNames:cssClass，
宽度：800} 
代码块有点混乱，考虑使用CTRL K而不是后台创建它们。