javascript - 谷歌图表中的自动宽度滚动条

Question

我在我的 HTML5 项目中使用谷歌图表。它采用 JSON 值（来自 DB）来绘制图形。

如果 JSON 值中的数据超过 5 到 6，我需要有一个滚动条。我已经通过 JSFiddle 创建了示例附加链接。

目前我已经给出了 22 个值。当 JSON 值有 3 或 4 个值时，我需要相同的效果。条形宽度没有任何变化，即使 JSON 有 50 个值，它也应该保持相同的宽度。

请为我提供解决方案，非常感谢。:)

这是链接： - http://jsfiddle.net/gK9r7/

Answer 1

这是解决方案：http: //jsfiddle.net/hsakX/

设置 bar.groupWidth 选项以固定条的宽度。然后使图表的宽度成为条形宽度和要显示的条数的函数：

var options = {            
    title: 'Company Performance',
    hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
    width: data.getNumberOfRows() * 65,
    bar: {groupWidth: 20}
};

将包含 div 上的溢出-x 设置为滚动：

#chart_div {
 overflow-x: scroll;
 overflow-y: hidden;     
 width: 500px;
 height: 550px;
}