当前位置: 首页 > 面试题库 >

Google Chart中的自动宽度滚动条

黎奇思
2023-03-14
问题内容

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

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

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

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

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


问题答案:

解决方法如下: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;
}


 类似资料:
  • 问题内容: 亲朋好友,是否可以增加放置在元素内部的滚动条的宽度? 我不是在谈论 浏览器本身 的默认滚动条,此页面以全屏模式运行,并且由于浏览器滚动条从不显示图片,因此内部元素具有自己的滚动条。 问题答案: 如果您谈论的是带有(或)自动出现在滚动条上的滚动条,那么没有,那仍然是浏览器使用常规OS小部件呈现的本机滚动条,而不是可以样式化的(*)。 虽然您可以按照Matt的建议,将其替换为由可样式化的d

  • 问题内容: 新手CSS问题。我认为一个元素的意思是“填充可用空间”。但是对于一个元素来说似乎并非如此。例如: 然后有两个问题: 是否确切定义了width:auto的含义?CSS规范对我来说似乎很模糊,但是也许我错过了相关的部分。 有没有一种方法可以实现我对输入字段的预期行为-即。像其他块级元素一样填充可用空间? 谢谢! 问题答案: 一个的宽度从其生成属性。默认值是驱动自动宽度的原因。 您可以按照下

  • 问题内容: 以下HTML将在div.container的右侧边缘显示滚动条。 是否可以确定该滚动条的宽度? 问题答案: 此功能应为您提供滚动条的宽度 基本步骤如下: 创建隐藏的div(外部)并获取其偏移宽度 使用CSS溢出属性强制滚动条显示在div(外部)中 创建新的div(内部)并附加到外部,将其宽度设置为“ 100%”并获得偏移宽度 根据收集的偏移量计算滚动条宽度 更新资料 如果在Window

  • 我有一个居中的flexbox结构,显示客户列表框。 我想实现的是,当屏幕变得比div中的内容更窄时,它不会隐藏在视口之外,而是将溢出添加到最长的项目,即with table,因此可以动态收缩。 当我将添加到中时,它的工作原理应该是一样的,但我不希望框的全屏宽度至少达到内容的大小。 |JSFIDDLE演示| 1-全屏窗口 2-调整大小(更小)的窗口 3-调整大小(更小)的窗口-所需结果

  • 我想把三个盒子水平地排成一行,但最后一个倒了。 当我移除滚动条时,它排列得很好。 所以,问题是由滚动条宽度引起的。 http://codepen.io/anon/pen/kxapap

  • 问题内容: 我有一个元素,其内容更改时我想为其宽度设置动画。它具有,并且永远不会改变。我已经看到了这个技巧,但这是为了在两个值之间进行转换并设置一个。我根本不操纵值,仅操纵内容,我希望元素的大小随动画而变化。CSS完全有可能吗? 这是我的代码的简化版本: 当用户将鼠标悬停在元素上时,我希望更改的大小可以动画。 问题答案: 正如我所评论的,还不能设置动画,所以请使用/ 技巧,或者,如果需要更精确的设