如何从 java 脚本中的柱形图中删除滚动条？

Question

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

var node = document.createElement('div')

它工作正常，但我的问题是我没有的滚动条 require.So，任何人都可以更喜欢如何从图表中取出滚动条。

这是我的柱形图代码部分

    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 但不知何故不符合要求。

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

Answer 1

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

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

代码：

#column
{
    overflow: hidden;
}

<div id="column">
    //your content goes here...
</div>

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

代码：

#content
{
    overflow: hidden;
}
#column
{
    overflow-y: scroll;
}

<div id="content">
    <div id="column">
        //your content goes here...
    </div>
</div>

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

如何从 java 脚本中的柱形图中删除滚动条？

How to remove the scroll bar from the column chart in java script?

html

javascript

google-api

google-visualization

column-chart