将 dygraph 内容注入 jquery UI 手风琴不显示

Question

我正在使用 dygraphs 库创建图形网格，并使用以下代码将它们注入到 accordion 元素中。问题来自手风琴：如果您在 jsFiddle 中注释掉手风琴部分（调整 div 的名称以将代码注入其中），图表会显示出来。

jsFiddle here.

html :

<div id="theAccordion">
</div>

javascript :

function createGraph(destination) {
  var g = new Dygraph(
    document.getElementById(destination),
    [[0,1],[1,2],[2,3],[3,4]],
    {
    labels: ["x","y"],
  strokeWidth: 0.0,
  drawPoints:true
 });
}

$(function() { 

var accordionHtml = "";
accordionHtml += "<h3 id='accordion-h3'>Global</h4>";
accordionHtml += "<div id='accordion-1'></div>";

$("#theAccordion").html(accordionHtml);
$("#theAccordion").accordion({
collapsible: true,
    autoHeight: true,
    active: false,
    heightStyle: "content"
})

var tableHtml = "";
tableHtml+= "<table><tr><td><div id='graph0'></div></td><td><div id='graph1'></div></td></tr></table>"
$("#accordion-1").html(tableHtml);
for (var i=0;i<2;i++) {
  createGraph("graph"+i);
}
});

欢迎大家帮忙！

Answer 1

Dygraph 通过在 HTML5 canvas 上绘图来工作。如果您检查折叠元素的内部 div，当页面首次加载时 canvas 的宽度和高度为 0。这可能是因为手风琴最初是折叠的。该元素会调整自身大小以填充其父容器，但由于容器是空的，因此它不知道要使自己变大。如果在打开手风琴时完全调整 window 的大小，则会加载图表，这一事实进一步支持了这一点。

也就是说，Dygraph 似乎没有触发 DOM 刷新的方法。它的一个功能 (updateOptions) 可能能够做到这一点，但那会有点 hack。

除了该功能外，我还确定了两个可能的简单修复方法：

如果可以在页面加载时打开手风琴，这似乎可以解决问题。您可以通过在 accordion.

active = 0

如果可以手动设置宽度和高度（以像素为单位），也可以：

（额外 space 因为代码呈现器不喜欢紧跟在编号列表之后）

{
  labels: ["x","y"],
  strokeWidth: 0.0,
  drawPoints:true,
  height: 320,
  width: 480
}

将 dygraph 内容注入 jquery UI 手风琴不显示

Inject dygraph content into jquery UI accordion does not show

javascript

jquery

jquery-ui

jquery-ui-accordion

dygraphs