javascript - 如何在java脚本中从柱形图中删除滚动条?

标签 javascript html google-api google-visualization column-chart

我创建了一个柱形图,使用 google.visualization.ColumnChart 单击 Google map 中的标记即可弹出该柱形图。已创建一个div,在其上植入柱形图。

var node = document.createElement('div')

它工作正常,但我的问题是我不需要滚动条。所以,任何人都可以喜欢如何从图表中取出滚动条。

这是我的柱形图代码部分

    function drawChart(marker) {

      var data = new google.visualization.DataTable();


         //For column chart
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Value');
        data.addColumn({type: 'string', role: 'style'});
        data.addRows([
            ['1', 8, 'color: #ac6598'],
            ['2', 7, 'color: #ac6598'],
            ['1', 7, 'color: #3fb0e9'],
            ['2', 9, 'color: #3fb0e9'],
            ['1', 10, 'color: #42c698'],
            ['2', 8, 'color: #42c698'],
            ['1', 8, 'color: #42c98'],
            ['2', 4, 'color: #42c98']

        ]);

            // Set chart options
            var options = {           
                width:200, height:150,           
                vAxis: { gridlines: { color: 'transparent'},textPosition: 'none'}
            };

            var node        = document.createElement('div'),
                infoWindow  = new google.maps.InfoWindow(),
                chart       = new google.visualization.ColumnChart(node);

                chart.draw(data, options);
                infoWindow.setContent(node);
                infoWindow.open(marker.getMap(),marker);
          }
 google.load('visualization', '1.0', {'packages':['corechart'], callback: drawChart});

我已经看过这个this SO Q/A但不知何故无法满足要求。

所以请帮我解决这个问题。提前致谢

最佳答案

如果列的大小不够大,删除滚动条将导致用户无法看到列内的内容。

要删除滚动条,您可以创建一个div并将其css属性overflow设置为隐藏,但请记住,如果溢出,列内的某些内容可能会不可见。

代码:

#column
{
    overflow: hidden;
}
<div id="column">
    //your content goes here...
</div>

但是,更好的方法是隐藏滚动条,同时允许用户滚动。这样就没有滚动条,但用户仍然可以滚动并看到隐藏的内容。为此,您可以为div列创建一个父div,并设置父div的overflow隐藏和子div列的overflow-y滚动。

代码:

#content
{
    overflow: hidden;
}
#column
{
    overflow-y: scroll;
}
<div id="content">
    <div id="column">
        //your content goes here...
    </div>
</div>

如果内容从上到下垂直溢出,Overflow-y 将允许用户滚动。

关于javascript - 如何在java脚本中从柱形图中删除滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31201812/

相关文章:

javascript - 选择具有其他类名称的附近表行并切换类

html - 嵌套在固定位置 div 中的绝对定位 div 的 Z-index

javascript - 需要帮助使我的 HTML 和 CSS 代码更有效地实现导航效果

security - 使用Google Visualization API时,数据是否发送给Google?

javascript - D3中的长按事件

javascript - 如何对 html 元素进行 AJAX 调用?

JavaScript:从文化设置中获取日期格式

javascript - JQuery append() 不应用 CSS 样式

jquery - 将 jQuery Post 发送到 Google API 时出现访问控制允许来源错误

c# - Google c# Api,从 v2.3 更改为 v3