1

google.visualization.ColumnChart を使用して Google マップのマーカーをクリックするとポップアップする縦棒グラフを作成しました。縦棒グラフが埋め込まれている div が作成されました。

var node = document.createElement('div')

それは正常に動作しますが、私の問題は私が必要としないスクロールバーです.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});

私はすでにこの SO Q/Aを見ましたが、どういうわけか要件に適合できませんでした。

だから、これで私を助けてください。そして、前もって感謝します

4

1 に答える 1

1

スクロールバーを削除すると、列のサイズが十分に大きくない場合、ユーザーは列内のコンテンツを見ることができなくなります。

スクロールバーを削除するには、div を作成し、その css プロパティのオーバーフローを非表示に設定しますが、オーバーフローすると列内の一部のコンテンツが表示されなくなる可能性があることに注意してください。

コード： 

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

ただし、より良いアプローチは、ユーザーがスクロールできるようにしながらスクロールバーを非表示にすることです。この方法ではスクロールバーはありませんが、ユーザーはスクロールして非表示のコンテンツを見ることができます。これを行うには、div列の親divを作成し、親divのoverflow hiddenと子div列のスクロールにoverflow-yを設定します。

コード： 

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

Overflow-y を使用すると、コンテンツが垂直にオーバーフローした場合に、ユーザーが上から下にスクロールできるようになります。

于 2015-07-03T08:45:10.813 に答える