Google Chart中的自动宽度滚动条

小编典典

Google Chart中的自动宽度滚动条

json

我在HTML5项目中使用了Google图表。它使用JSON值（来自DB）来绘制图形。

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

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

请给我解决方案，非常感谢。:)

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

阅读 255

2020-07-27

共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;
}

2020-07-27