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

Question

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

这里的jsFiddle 。

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 画布上绘图来工作。 如果您检查折叠元素的内部 div，当页面首次加载时，该画布的宽度和高度为 0。 这可能是因为手风琴最初是倒塌的。 元素调整自己的大小以填充其父容器，但由于容器是空的，它不知道自己有多大。 如果在打开手风琴时完全调整窗口大小，则会加载图形，这一事实进一步支持了这一点。

话虽如此，Dygraph 似乎没有触发 DOM 刷新的方法。 它的一个功能（ updateOptions ）可能能够做到这一点，但这会有点updateOptions 。

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

1. 如果可以在页面加载时打开手风琴，这似乎可以解决问题。 您可以通过在对accordion的调用中设置active = 0来做到这一点。

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

（额外的空间，因为代码渲染器不喜欢紧跟在编号列表之后）

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