将 .hide() 和 .show() 与 Google Visualization 结合使用

2024-03-22

我用谷歌可视化创建了一个折线图。我已经测试过它并且它按预期工作。问题是,当我在可视化上使用 .hide() 启动页面,然后单击按钮显示它时,它不会显示可视化。这是我所拥有的内容的精简版本。

<script language="JavaScript">
    $(document).ready(function(){
        $('#visualization').hide();
        $('#show').click(function() {
            $('#visualization').show();
        });
        $('#hide').click(function() {
            $('#visualization').hide();
        });

    });
// Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart','annotatedtimeline']});
// Begin Annoted Time Line Chart - 1
      function drawVisualization() {
          var data = new google.visualization.DataTable();
          data.addColumn('date', 'Date');
          data.addColumn('number', 'Number of Users');
          //data.addColumn('string', 'title1');
          data.addRows(10);
data.setValue(0, 0, new Date(2011, 11 ,1));
          data.setValue(0, 1, 21);
          data.setValue(1, 0, new Date(2011, 11 ,2));
          data.setValue(1, 1, 24);
// Do this for the rest of the chart

...
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
              document.getElementById('visualization'));
          annotatedtimeline.draw(data, {'displayAnnotations': true});
        }

      google.setOnLoadCallback(drawVisualization);

</script>
<body>
<a href="#" id="show">show</a> <a href="#" id="hide">hide</a>
    <div style="border:solid">
                <div id="visualization" style="width: 100%; height: 400px;"></div>
        </div>
</body>

如果我在开头注释掉 .hide() ,则显示和隐藏的 2 个按钮工作正常,但当其最初隐藏时,它不起作用。我尝试将可视化代码放置在查询部分上方,但它仍然无法工作。

有人知道怎么修这个东西吗?

Thanks,

Craig

EDIT

我能够使用这个 设置超时(函数(){ $('#tabs').tabs(); // 或隐藏() }, 50); });


如果在隐藏元素中渲染,Gviz 图形将无法正确渲染(通常非常小/接近不可见)。使元素可见后,您需要重新绘制图形。

根据您的代码,执行此操作的一个简单示例是将绘制函数添加到显示处理程序的回调中:

$('#visualization').show(function() {
    drawVisualization();
});

回调将在演出结束后执行。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 .hide() 和 .show() 与 Google Visualization 结合使用 的相关文章

  • 添加 Javascript 按钮来更改 iframe 的内容

    我正在尝试创建此页面 其中有一个 Iframe 并且我想添加一个按钮来显示 iframe 中的下一页 以及一个按钮来显示 iframe 中的上一页 我总共有 4 个页面要在名为 1 html 2 html 3 html 4 html 的 i
  • 如何以 JavaScript 编程方式获取旋转的 svg 文本边界

    我正在动态渲染 SVG 图像并创建旋转文本 如果旋转的文本与其他文本重叠 我需要删除该文本 但我无法测量旋转的文本来创建边界并检查下一个标签文本区域 我创建了 3 个 SVG 元素来解释 SVG 1 显示重叠的文本 SVG 2 显示重叠的旋
  • 在模态上自动滚动引导模态('show')

    我有一个用于评论的引导模式 评论表格附加在评论列表的底部 我希望此模式在打开时滚动到列表底部 如果有超过 2 或 3 条评论 我已经安装了这个幻灯片插件 http jesseprice com jquery slide to plugin
  • jquery 中 DOM 元素的手动垃圾回收是否可以提高浏览器性能?

    在性能范围内 删除不再需要的元素是否有意义 或者浏览器是否对代码中未进一步引用的 dom 元素执行自动垃圾收集 some element fadeOut 1000 function el el remove lt does this mak
  • jQuery异步ajax查询和返回值问题(范围、闭包)

    由于异步查询和变量范围问题 代码无法正常工作 我不明白如何解决这个问题 使用 async false 更改为 ajax 方法 不是一个选项 我知道闭包 但我如何在这里实现它 不知道 我已经在这里看到了有关 js 中的闭包和 jQuery 异
  • jQuery 更改为隐藏字段后触发重力表单中的表单更新

    简而言之 是否有 JavaScript 函数或挂钩来触发重力形式的更新 以便执行条件逻辑 原问题 我正在使用重力形式 并且创建了一个 变化时 事件 gform 1 find gfield date dropdown month select
  • 选择 jQuery 数据网格插件? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何将jquery.post中的数据发送到使用ViewModel作为参数的mvc控制器?

    我正在使用 ASP NET MVC 编写应用程序 我有带有操作的控制器 它使用一些 ViewModel 作为参数 如何使用 jquery post 将表单数据发送到该 mvc 控制器 post Yourcontroller YourActi
  • 如何计算持续时间?

    我正在开发一个基于网络的应用程序来从系统日期时间捕获开始时间和结束时间 但我的主要问题是我不知道如何获取停机时间的开始时间和结束时间之间的持续时间 Function to get current start time var startTi
  • jQuery:如何检查一个元素是否是最后一个同级元素?

    如何检查一个元素是否是最后一个兄弟元素 对于连续的最后一个单元格 我想执行不同的操作 这不起作用 td each function var this this if this this parent last td alert 123 如果
  • 在 Django 中处理 ajax json 对象 - 'QueryDict' 对象没有属性 'read' 错误

    我正在尝试解析 Django 视图中的 json 对象 该对象已通过 ajax 通过 post 方法从客户端传递过来 JS post update vendor merchandise types JSON stringify json o
  • 类更改后 JQuery 单击事件无法正常工作

    我有与此类似的 JQuery 脚本 follow link click function Do some stuff this removeClass this addClass unfollow link unfollow link cl
  • 使用 CSS3 反转进度条

    我有这个EXAMPLE http jsfiddle net Mils fmaGZ 1 我想将进度条反转 180 度 从右向左进行 要获得这样的东西 我试图改变过渡属性但没有结果 Code progress bar span display
  • 从 JavaScript 重新启动动画 GIF,无需重新加载图像

    我正在使用动画 GIF 创建动画幻灯片 我正在从一个动画淡入淡出到下一个动画 问题是 我发现确保 GIF 从第一帧开始动画的唯一方法是每次显示时重新加载它 每个 GIF 大约 200KB 这对于连续幻灯片播放来说带宽太大了 这是我当前的代码
  • 添加选中的单选按钮的总数

    UPDATE 如果您尝试此链接上的表格http jsfiddle net Matt KP BwmzQ http jsfiddle net Matt KP BwmzQ 按下小提琴并选择右上角的 40 英镑单选按钮 然后在底部看到订单总额 上面
  • 按 Enter 键提交消息?

    我正在开发一个基于本教程使用 Meteor 构建的聊天应用程序 http code tutsplus com tutorials real time messaging for meteor with meteor streams net
  • 使用 jQuery live() 初始化插件?

    使用 jQuery 在特定类的所有当前和未来元素上自动初始化插件的最佳方法是什么 例如 假设我想要全部
  • 从本地 html/javascript 网站插入 mySQL 数据库

    我正在尝试做什么 我的程序的目的是插入数据local HTML JS网站变成online 非本地 mySQL数据库 到目前为止我尝试过的 我试图用来实现此目的的原始方法是让我的本地网站使用 javascript 通过在线发布数据PHP文件
  • getJson问题,它返回未定义

    大家好 我有这个代码 var temp if method 1 temp Words val get the words from textbox else getJSON http localhost mine test js funct
  • 使用 jQuery 获取 JSON Facebook Graph API 用户信息

    我正在尝试使用图形 API 来获取有关用户的一些基本信息 无需用户授权 只需获取公共详细信息 我正在尝试使用 jQuery 和 getJSON 来获取数据并解析它 但我很难弄清楚如何访问我想要的键值对 我想要有类似的东西 var fburl

随机推荐

  • nginx 子域和域重写 w 代理通行证

    我需要这两种类型的重写 subdomain domain com gt domain com website subdomain otherdomain com gt domain com userdomain otherdomain co
  • OpenCV:用轮廓上的大多数点拟合椭圆(而不是最小二乘)

    I have a binarized image which I ve already used open close morphology operations on this is as clean as I can get it tr
  • 停止和删除 docker 容器的单个命令

    有没有什么命令可以组合docker stop and docker rm一起指挥 每次我想删除一个正在运行的容器 我需要顺序执行2个命令 我想知道是否有一个组合命令可以简化这个过程 docker stop CONTAINER ID dock
  • 分解集中式数据库最经济有效的方法是什么?

    继这个问题之后 当你真的搞砸了分布式系统的设计时该怎么办 https stackoverflow com questions 2355910 what to do when youve really screwed up the desig
  • 如何使用 torch.stack?

    我该如何使用torch stack将两个张量与形状堆叠a shape 2 3 4 and b shape 2 3 没有就地操作 堆叠需要相同数量的维度 一种方法是松开并堆叠 例如 a size 2 3 4 b size 2 3 b torc
  • 类文件的最佳大小是多少?

    我知道类文件没有单一的 理想 大小 但仍然 是否有任何关于类文件的最佳大小的数据 如研究 而不是意见 我想说 最佳大小足以让该类完成其工作
  • HTML / CSS 视频结束事件问题 [已关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我目前正在设计一个网站 我已经完成了所有工作 但我无法弄清楚最后一步 这是交易 我想播放视频 但我希望它的 z 索引覆盖整个网站索引页
  • 如何使用 d3.js 以编程方式触发拖动事件?

    我编写了一些对 svg 元素使用拖动事件的代码 该代码运行良好 我想为其编写一些测试 我不想手动移动鼠标 而是想以编程方式触发dragstart and drag事件与选择 调度 https github com d3 d3 selecti
  • VHDL - FSM 未启动(仅在时序仿真中)

    我正在写我的硕士论文 而且我对 VHDL 还很陌生 但我仍然必须实现一些复杂的东西 这是我必须编写的最简单的结构之一 但我仍然遇到了一些问题 它是一个 FSM 采用低电平有效同步信号 用于对 DAC 进行编程 实现 24 位移位寄存器 这只
  • 在 jqgrid 中动态将 rownumbers 设置为 false

    我喜欢使用以下命令在网格中显示行号rownumbers财产 但如果只返回一行 有没有办法设置rownumbers动态为 false 为什么 乍一看 在没有标题的列中看到 1 有点令人困惑 但如果有多行 那么您很快就会意识到该列的用途 你可以
  • 通过 DOM、insertAdjacentHTML 或 document.write 将 SCRIPT 添加到 IFRAME

    我需要将 SCRIPT 添加到沙盒 IFRAME 中 并且我试图避免使用document write see here https stackoverflow com questions 4537963 what are alternati
  • 如何删除使用 Uri 创建的文件?

    我的应用程序从相机拍摄照片并将其保存在一个文件中 该文件的 Uri 存储在 SQL 数据库中 使用数据库中的 Uri 初始化位图可以完美地工作 但是 当我尝试使用数据库中的 Uri 初始化文件 然后使用删除时imagefile delete
  • 使用 Ansible“lineinfile”模块编辑 /etc/sudoers 是否安全?

    我想根据以下内容更改 sudo 会话超时this https superuser com a 149740 775166回答 我可以编辑普通文件 lineinfile path etc sudoers regexp Defaults env
  • 将 ggplot 中的背景部分更改为不同的颜色[重复]

    这个问题在这里已经有答案了 使用以下数据框d day lt gl 8 1 24 labels c Mon Tues Wed Thurs Fri Sat Sun Avg day lt factor day level c Mon Tues W
  • 使用POSTMAN时不会出现CORS问题

    我已经使用 POSTMAN 发送一段时间了HTTP requests like GET POST PUT用于 RESTful Web 服务 最近遇到一种情况 当通过浏览器向我的 REST API 发送请求时 我收到一条消息 请求的资源上不存
  • 如何在django中检查多对多字段的类型?

    如何检查 django 中多对多字段的类型 我想这样做 import django field class django db models fields related ManyRelatedManager 这是行不通的 因为类ManyR
  • DynamoDBMapper 负载与查询

    DynamoDBMapper 提供了从表中读取一项的不同方法 query load 有推荐吗 该使用哪一个 在快速测试中 以下两个代码片段对于主键 哈希和范围键 日期的表返回相同的 MyEntry 项 而查询方法大约快 10 load pu
  • Spring-Core-WS 与 Spring 4.3.0 不兼容,是吗?

    我总是尝试在我的 Spring 项目中使用最新的 jars api 我们有一个 Spring 4 2 4 RELEASE 然后我升级到 4 3 0 一切都构建和编译得很好 但是 当我尝试运行单元测试时 我收到一条错误消息 我确实追踪到 Sp
  • 在 Wpf 应用程序中查看 Byte[] Pdf

    你好 我在 Byte 中找到了一些 pdf 文件 我正在寻找一种在 WPF 应用程序中查看它们的方法 我已经看过了http hugeonion com 2009 04 06 displaying a pdf file within a wp
  • 将 .hide() 和 .show() 与 Google Visualization 结合使用

    我用谷歌可视化创建了一个折线图 我已经测试过它并且它按预期工作 问题是 当我在可视化上使用 hide 启动页面 然后单击按钮显示它时 它不会显示可视化 这是我所拥有的内容的精简版本