javascript 谷歌图表中的自动宽度滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12136331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto width scroll bar in Google Chart
提问by Hariram Nandagopal
I using the Google Chart for in my HTML5 Project. which takes the JSON values ( from DB ) to plot the graph.
我在我的 HTML5 项目中使用了 Google Chart。它采用 JSON 值（来自 DB）来绘制图形。
my need is to have a scroll bar if the datas are more than 5 to 6 in the JSON Value. I have created the sample attached link via JSFiddle.
如果 JSON 值中的数据超过 5 到 6，我需要有一个滚动条。我已经通过 JSFiddle 创建了示例附加链接。
currently i have given 22 values. i need the same effect when the JSON value has 3 or 4 values. There shd not be any change in the bar width it should maintain the same width even if the JSON has 50 values.
目前我已经给出了 22 个值。当 JSON 值有 3 或 4 个值时，我需要相同的效果。条形宽度没有任何变化，即使 JSON 有 50 个值，它也应该保持相同的宽度。
Kindly provide me the solution thank you so much. :)
请给我提供解决方案，非常感谢。:)
Here is the link : - http://jsfiddle.net/gK9r7/
这是链接：- http://jsfiddle.net/gK9r7/
回答by Greg Ross
Here's the solution: http://jsfiddle.net/hsakX/
这是解决方案：http: //jsfiddle.net/hsakX/
Set the bar.groupWidth option to fix the width of the bars. Then make the width of the chart a function of the bar-width and the number of bars to be displayed:
设置 bar.groupWidth 选项以固定条的宽度。然后使图表的宽度成为条形宽度和要显示的条形数量的函数：
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
width: data.getNumberOfRows() * 65,
bar: {groupWidth: 20}
};
Set the overflow-x on the containing div to scroll:
在包含的 div 上设置 overflow-x 以滚动：
#chart_div {
overflow-x: scroll;
overflow-y: hidden;
width: 500px;
height: 550px;
}
