谷歌图表时间线水平滚动

2023-11-23

我有一个时间线图表,与本页的第一个示例非常相似(https://developers.google.com/chart/interactive/docs/gallery/timeline).

我在 Y 轴上有活动(做午餐、吃饭、等等),在 X 轴上我有时间。

我想启用水平滚动和图表放大/缩小(如本主题中所述谷歌图表水平滚动条)。但我似乎无法让它发挥作用。

有什么方法可以在时间线图表上启用水平滚动吗?

非常感谢。

亚历山德罗


没有标准配置选项 on the Timeline用于滚动或缩放的图表。

但你可以使用 css 进行水平滚动

在图表选项中设置特定宽度 -->width: 1200

并将其包裹在宽度较小的容器中 -->overflow-x: scroll;

请参阅以下工作片段的示例...

google.charts.load('current', {
  callback: drawChart,
  packages: ['timeline']
});
function drawChart() {
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'President' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
    [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
    [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

  chart.draw(dataTable, {
    width: 1200
  });
}
#chart_wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 400px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_wrapper">
  <div id="chart_div"></div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

谷歌图表时间线水平滚动 的相关文章

  • Grunt-browserify+mapify+coffeescript = 未通过相对路径找到模块

    我尝试让 grunt browserify 使用 Coffeescript 的相对路径 但当我尝试构建源代码时总是收到错误消息 gt gt Error module src app utils includeMixin not found
  • 使用 .add() 选择多个 jQuery 对象

    是否 add http api jquery com add 方法允许一次选择多个对象而不是一次添加一个 one add two add three add four on click function 以下变量的设置方式相同 因为每个变量
  • 当标题中包含“&”时,电子邮件标题无法正确显示,如何在 JavaScript 中修复?

    我有一些代码以以下格式显示文章标题列表 简短描述和作者姓名 标题 作者姓名 描述 作者的姓名和描述与此处无关 因为它们始终显示正确 大多数标题也可以正确显示 以下是一些虚构的示例 关于银行业务您需要了解的最重要的一件事 作者姓名 正确显示
  • 所有事件的 HTML5 EventSource 监听器?

    我使用 EventSource 在 JavaScript 客户端应用程序中推送通知 我可以像这样附加事件监听器 source addEventListener my custom event type function e console
  • 三.js环境光意想不到的效果

    在下面的代码中 我渲染了一些立方体并使用点光源和环境光照亮它们 然而 当设置为 0xffffff 时 AmbientLight 会将侧面的颜色更改为白色 无论其指定的颜色如何 奇怪的是 点光源按预期工作 我怎样才能使环境光表现得像点光 因为
  • 从 html5

    我正在寻找一种方法来根据用户代理字符串将控件属性添加到视频标签 我不希望在 iPad 和 Android 之外的任何浏览器或设备上出现控件属性 所以我认为用户代理是最好的识别方法 因为 ipad 和 android 一词出现在各自的 UA
  • 如何在 Angular 2 应用程序中使 DateAdapter 单例?

    我正在开发一个带有延迟加载模块的 Angular 7 应用程序 我也使用有角度的材料组件 我想在日期选择器组件中本地化并支持多个区域设置 当应用程序语言发生变化时 我想在整个应用程序中全局更改它 可以通过 DateAdapter setLo
  • Browserify:如果需要,使用 module.exports,否则暴露全局

    我正在考虑采用浏览器化 http browserify org 对于我的一些项目 但想确保其他人如果想使用 捆绑的 代码就不必使用 browserify 执行此操作的明显方法是通过以下方式公开模块导出module exports以及通过一个
  • 在移动网站中处理 iPhone 事件(如向左滑动)

    iPhone 浏览器是否有可以使用 Javascript 挂钩的特殊事件 例如 如果用户向左滑动 我想执行某个操作 如果有类似的活动 很高兴看到所有这些活动的参考 理想情况下 有一天所有触摸屏移动浏览器都会有一个标准 您可以访问多点触控事件
  • Gmail 和 Google Chrome 12+ 中的“从剪贴板粘贴图像”功能如何工作?

    我注意到一个来自 Google 的博文 http gmailblog blogspot com 2011 06 pasting images into messages just got html其中提到 如果您使用的是最新版本的 Chro
  • 可选回调的 JavaScript 样式

    我有一些函数偶尔 并非总是 会收到回调并运行它 检查回调是否已定义 函数是一种好的风格还是有更好的方法 Example function save callback do stuff if typeof callback undefined
  • 我们如何使用 thymeleaf 绑定对象列表的列表

    我有一个表单 用户可以在其中添加任意数量的内容表对象这也可以包含他想要的列对象 就像在 SQL 中构建表一样 我尝试了下面的代码 但没有任何效果 并且当我尝试绑定两个列表时 表单不再出现 控制器 ModelAttribute page pu
  • Onblur 事件在另一个 div 的 onclick 之前触发

    如上所述 我有一个按钮 单击该按钮将打开子菜单 对于子菜单中的每个选项 都有三个元素 我认为实际上还有更多元素 但为了简单起见 将其保留为 3 我将焦点放在子菜单的主 div 白色 框架 上 Onblur 这个 div 然后我隐藏子菜单 这
  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到
  • 如何显示 GroupList 的 FormArray?

    我正在尝试制作一个交互式表单 在每一行上列出一个项目以及一个删除按钮 在我的示例中称为 verwijderen 这些项目是从数据库中检索的 并且每个项目都实例化为名为的自定义对象LaborPeriod 然后这些对象被转化为FormGroup
  • 模拟节点外部模块默认使用 jest 的链式方法

    在我们的节点 CLI 中 我们有一个简单的方法 use strict const ora require ora module exports function startSpinner textOnStart color spinnerT
  • Babel/RequireJS + typeof“RangeError:超出最大调用堆栈大小”

    我有一个非常基本的 JS 错误 我很羞愧无法解决它 我正在使用 ES6 和 Babel 进行开发 并且正在做一些实验 请注意 我在 Babel 中使用了这些参数 presets es2015 plugins transform es2015
  • 使用 javascript/jquery 从数据库格式化日期的正确方法

    我正在调用包含日期时间数据类型的数据库 日期看起来像这样 2005 05 23 16 06 00 000 当用户从列表中选择某个项目时 我想在表格中显示它 我调用我的控制器操作并返回所有时间的 Json 并将它们放入表中 问题是日期完全错误
  • JavaScript 正则表达式两个标签之间的多行文本

    我编写了一个正则表达式来从 HTML 中获取字符串 但似乎多行标志不起作用 这是我的模式 我想将文本输入h1 tag var pattern div class box content 5 h1 lt lt h1 gt mi m html
  • 如何在 Twilio 可编程聊天中的单个通道上侦听消息

    Using twilio chat js https www npmjs com package twilio chat如何在单个频道上收听消息 我发现这个问题 https stackoverflow com questions 54687

随机推荐

  • 优化 Jinja2 环境创建

    我的应用程序在 Google App Engine 上运行 由于 CPU 使用率高 大多数请求不断收到黄色标记 使用探查器 我将问题追溯到创建的例程jinja2 Environment实例 我正在模块级别创建实例 from jinja2 i
  • 为什么在 Intellij 中使用 Android SDK 时缺少 Android AVD Manager?

    I am trying to use the Android SDK in my IntelliJ project that is a larger project containing both web and ios clients a
  • Numpy:作为 Matlab 进行赋值和索引

    有时 分配仅具有一个索引的数组很有用 在 Matlab 中这很简单 M zeros 4 M 1 5 end 1 M 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 Numpy 有没有办法做到这一点 首先 我想展平数组 但该操
  • 最适合拼写检查器、字典和同义词库的算法和数据结构

    实施的最佳方式 字典 有没有比 Trie 更好的 DS 字典 同义词库 不知道 因为匹配的是单词的含义 相似的含义 拼写检查器 比哈希映射更好的东西 如果可能的话 提供正确的拼写建议 当在一小时的面试中被问到 我们是否需要为算法编写 c c
  • Android 搜索:使用 FTS 表以及普通 SQLite DB 表

    这更多的是一个设计问题 而不仅仅是一个编码问题 我已经有一个将数据存储在 SQLite DB 表中的应用程序 现在我想添加搜索功能 据我了解 为了启用搜索功能 我需要 FTS 表 我拥有的表格是 不完全相同 但给出了非常相似的示例 内容表
  • Android 音频:改变音调

    SoundPool 的 Android 文档称 该应用程序还可以通过实时调整多普勒或合成效果的播放速率来改变音调 所以我尝试这样做 使用 setRate 方法从一个音符平滑地变化到另一个音符 但结果很糟糕 声音变化非常参差不齐 这是我尝试过
  • MySQL 使用 CONCAT 条件进行选择

    我正在尝试在脑海中编译它 我有一个包含名字和姓氏字段的表 我有一个像 Bob Jones 或 Bob Michael Jones 这样的字符串以及其他几个字符串 问题是 例如我有 鲍勃的名字 以及 迈克尔 琼斯的姓氏 所以我想 SELECT
  • Java流是否有相当于带有变量赋值的while

    是否存在与以下内容等效的流 List
  • Tensorflow 从元图中打印所有占位符变量名称

    我有一个张量流模型 其中有 meta 和检查点文件 我试图打印模型所需的所有占位符 而不查看构建模型的代码 以便我可以在不知道模型是如何创建的情况下构建输入 feed dict 作为参考 这里是模型构建代码 在另一个文件中 def save
  • 优秀的 setjmp/longjmp 教程 [关闭]

    Closed 这个问题不符合堆栈溢出指南 目前不接受答案 你好 我想阅读有关 C 语言 setjmp longjmp 的优秀教程 如果有真实的而不是人造的示例 那就更好了 Thanks 这并不是一个真正的教程 而是libpng 文档描述该库
  • 应用程序更新后共享首选项丢失

    我一整天都在研究这个问题 以下是要点 共享首选项should当用户更新应用程序时保持持久性 就我而言 更新应用程序后 它们丢失了 这个问题每次都会重现 我从 Play 商店安装旧的 APK 然后adb install r new apk使用
  • 色彩校正 MP4/Webm 视频

    我有一个大型视频 其中一些动画对于其他嵌入方法 gif png 序列等 来说太复杂 太长 并且我们遇到了视频中颜色的问题 本质上 我们将网页背景作为视频的一部分 以防止视频播放时出现任何边缘 我们正在尝试使视频上的渐变背景与网页上的渐变背景
  • Jenkins 的 Github 插件获取提交者和作者姓名

    如果我理解得很好 git 插件会将提交者和作者的姓名以及电子邮件暴露给环境变量GIT AUTHOR NAME GIT COMMITTER NAME GIT AUTHOR EMAIL and GIT COMMITTER EMAIL基于git的
  • Netbeans 等待连接到 XDEBUG

    Netbeans 不会连接到 xdebug 我尝试过以下帖子中的建议 调试 IDE 与 XDebug 的端口连接 等待连接 netbeans 显示 正在等待连接 netbeans xdebug 但这并不能解决我的问题 Netbeans 似乎
  • 带分隔符的 Android 列表视图

    我想创建一个带有分隔符的列表视图 就像在默认联系人应用程序中一样 我的应用程序需要对列表进行排序 并用分隔符分隔项目 如联系人应用程序中的字母顺序排序 能够使用分隔符标题进行滚动将是一个额外的优势 任何指示都会有帮助 谢谢 看看这个开源项目
  • 为什么 numpy.dtype('float64') 很特别?

    有人可以解释以下脚本输出背后的逻辑吗 import numpy if numpy dtype numpy float64 None print Surprise 谢谢 看起来像是一场不幸的事故 有人决定dtype None 将 默认 浮动
  • 如何创建可重用的表单 Vue 组件

    假设我想创建一个联系表单 在此联系表单中 用户可以有多个地址 我认为这是使用 Vue 组件的绝佳机会 这样我就不必创建冗余的地址表单字段 然后我就可以在网站的不同区域使用这个组件 比如编辑 创建等 我将如何创建一个父级可以使用的表单组件 并
  • 将参数传递给 Dart Polymer 元素

    我能找到的 Dart Polymer 的唯一可靠示例不使用任何参数 如何将参数传递给模板 是通过构造函数完成的吗 我的具体示例是 我有一个带有标题的卡片元素 我想将卡片的标题作为字符串传递给该元素 我看过将数据传递给 Polymer 元素
  • 使用 CLASP 测试 GAS 时如何模拟依赖关系

    背景 我最近了解到CLASP并对使用的可能性感到兴奋TDD编辑我的谷歌应用脚 本 天然气 本地 NOTE 可能有一种方法可以使用现有的 GAS 编辑器编写测试 但如果可能的话 我更愿意使用现代编辑器 clasp 效果很好 但我无法弄清楚如何
  • 谷歌图表时间线水平滚动

    我有一个时间线图表 与本页的第一个示例非常相似 https developers google com chart interactive docs gallery timeline 我在 Y 轴上有活动 做午餐 吃饭 等等 在 X 轴上我