我创建了一个柱形图,通过使用google.visualization.ColumnChart点击Google地图中的标记来弹出该柱形图。已创建 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,但不知何故不符合要求。
所以请帮助我。并提前感谢
答案 0 :(得分:1)
如果列的大小不够大,删除滚动条将导致用户无法查看列中的内容。
要删除滚动条,您可以做的是创建一个div并将其溢出的css属性设置为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>
溢出-y将允许用户在内容从上到下垂直溢出时滚动。