Google Chart中的自动宽度滚动条 [英] Auto width scroll bar in Google Chart

问题描述

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

I using the Google Chart for in my HTML5 Project. which takes the JSON values ( from DB ) to plot the graph.

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

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.

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

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.

请给我解决方案非常感谢你。 ：）

Kindly provide me the solution thank you so much. :)

以下是链接： - http：// jsfiddle .net / gK9r7 /

Here is the link : - http://jsfiddle.net/gK9r7/

推荐答案

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

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

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:

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

将包含div的overflow-x设置为滚动：

Set the overflow-x on the containing div to scroll:

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

这篇关于Google Chart中的自动宽度滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！