在弹出窗口中显示nvd3 pieChart时出现问题?

时间:2016-08-08 12:40:35

标签: javascript charts delay nvd3.js popupwindow

我在弹出窗口中打开nvd3 pieChart。我像这样创建弹出窗口:

function openPopup(html,pos,style) {
    var newWindow = window.open('');
    newWindow.document.write(html);
    return newWindow;
}

function openChartPopup(chartID,chartTitle) {
    divId = "div" + chartID;
    html = "<p>"+chartTitle+"</p><div  id= \""+divId+"\"><svg id=\""+chartID+"\"></svg></div>";
    newWindow = openPopup(html,"_blank","");
    return d3.select(newWindow.document.getElementById(chartID));
}

然后我使用以下代码创建一个pieChart:

de_select = openChartPopup("test_chart","TEst Chart");
    var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .showLabels(true)
      .growOnHover(true);
    de_select.datum(exampleData());
    de_select.style({"width":"400px", "height":"500px"});
    de_select.transition().duration(350);
    de_select.call(chart);
    nv.addGraph(chart);

我在点击按钮时执行上面的代码,弹出一个图表,但有时它看起来不正确,如下所示: enter image description here

当我切换标签并再次关注弹出窗口时,它会正确显示为: enter image description here

但是,所有图表属性仍然无法正常工作,例如“growOnHover”,但是当我在普通的html页面而不是弹出窗口中显示图表时,相同的代码工作正常,我想它与弹出窗口有关,这是NVD3的问题,?有谁可以指出这个问题?

1 个答案:

答案 0 :(得分:2)

试试这个:

nv.utils.windowResize(chart.update);

这将在调整窗口大小时更新图表。在弹出窗口的情况下可能会发生这种情况。

我不确定你是如何打开弹出窗口的。你可以用

newWindow = window.open("",title, "width=400,height=500");
newWindow.document.write(html);