javascript - 将 dygraph 内容注入(inject) jquery UI Accordion 不显示

Question

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

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。这可能是因为 Accordion 最初是折叠的。该元素会调整自身大小以填充其父容器，但由于容器是空的，因此它不知道要使自己变大。如果在打开 Accordion 时完全调整窗口大小，则会加载图表，这一事实进一步支持了这一点。

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

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

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

2. 如果可以手动设置宽度和高度(以像素为单位)，也可以:

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

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