Google Chart中的自动宽度滚动条

Question

我在HTML5项目中使用Google Chart.它采用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的overflow-x滚动:

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