Как убрать полосу прокрутки с диаграммы столбца в сценарии Java?

Question

Я создал диаграмму столбцов, которая будет отображаться при нажатии на маркер на карте Google с помощью google.visualization.ColumnChart. Создан 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});

Я уже видел это в этом Q/A, но как-то не смог вписаться в требование.

Поэтому, пожалуйста, помогите мне с этим. И заранее спасибо

Answer 1

Удаление полосы прокрутки приведет к тому, что пользователь не сможет увидеть содержимое внутри столбца, если размер столбца недостаточно велик.

Чтобы удалить полосу прокрутки, вы можете создать div и установить для его свойства css overflow значение hidden, но имейте в виду, что некоторое содержимое внутри столбца может не отображаться, если оно переполняется.

Код:

#column
{
    overflow: hidden;
}

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

Однако лучшим подходом было бы скрыть полосу прокрутки, позволяя пользователю прокручивать. Таким образом, полоса прокрутки отсутствует, но пользователь все еще может прокручивать и видеть скрытый контент. Для этого вы можете создать родительский элемент div для столбца div и установить скрытое переполнение родительского элемента div и значение overflow-y для прокрутки столбца дочернего элемента div.

Код:

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

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

Overflow-y позволит пользователю прокручивать, если содержимое переполняется по вертикали, сверху вниз.