【问题标题】:Build a chart on a hidden element with jqPlot使用 jqPlot 在隐藏元素上构建图表
【发布时间】:2013-03-08 19:34:15
【问题描述】:

我有一个使用 jQuery UI 选项卡的页面。当页面加载时,我启动了一个 setTimeout,它每 100 毫秒发出一个 ajax 请求,以获取每个选项卡内容的 HTML。此 HTML 的一部分是用于 jqPlot 图表和生成它的脚本的 <div>

我遇到的问题是 jqPlot 脚本似乎不喜欢选项卡 2 .. n 上的元素在尝试构建图表时被隐藏。第一个选项卡上的图表看起来很好,但所有其他选项卡上的图表永远不会被构建。

我能够通过等待在每个选项卡的 show 事件上调用 $.jqplot 来解决问题,但是在显示选项卡之前图表不会构建,因此用户在 JS 时会遇到一点延迟构建图表。

当标签被隐藏时,有没有办法让 jqPlot 构建这些图表?

【问题讨论】:

  • 刚刚在下载包含的文档中找到hiddenPlotsInTabs.html,但在网上没有看到这个。基本上,他们建议我在解决方法中做同样的事情,等到选项卡显示调用 jqplot 方法。

标签: jquery jquery-ui canvas jqplot


【解决方案1】:

一些想法:

  1. 在选项卡区域上放置一个遮罩 div 以将其隐藏(绝对位置,z-index 9999)
  2. 渲染所有图表
  3. 图表完全呈现后,然后运行 ​​jquery-ui 选项卡(隐藏除一个呈现的图表之外的所有图表)
  4. 去掉遮罩,露出标签

  1. 生成高度和宽度为零的 div 并隐藏溢出
  2. 在该 div 中为每个选项卡放置一个非常大的 div
  3. 在那些隐藏的 div 中呈现您的图表
  4. 同时生成您的 jquery ui 选项卡
  5. 将呈现的图表移动到选项卡中

  1. 在每个选项卡中放置一个 iframe,并在单独的 html 页面上呈现图表
  2. 这样每个 iframe 都会执行,无论是否可见,并且 jquery-ui 选项卡可以切换为完全异步渲染的图表

  1. 使用转换将您的 html 移出舞​​台左侧
  2. 先渲染图表
  3. 图表完全呈现后,然后运行 ​​jquery-ui 选项卡(隐藏除一个呈现的图表之外的所有图表)
  4. 通过移除变换将元素移回

  1. 使用node.js在服务器端生成jqplot输出
  2. 在您的页面中包含输出
  3. 运行 jquery 选项卡

【讨论】:

  • 这些想法很棒。我会尝试一些。谢谢!
  • 实际上我最终还是坚持了我的解决方法并接受了短暂的延迟,因为这是插件开发人员建议的方法。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多