Problems while displaying nvd3 pieChart in a pop u

问题:

I am opening nvd3 pieChart in a popup window. I create popup window like this:

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));
}

then I create a pieChart using following code:

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);

I execute the above code on button click which opens a chart in pop up but sometimes it doesn't appear correctly and looks like this:

When I switch tabs and focus on pop window again it appears correctly as:

However, all chart properties still doesn't work fine, for example "growOnHover" but the same code works fine when I display chart in a normal html page instead of popup, I guess it has something to do with popup window, Is it the problem with NVD3,? Can anyone point out the issue ?

回答1:

Try this:

nv.utils.windowResize(chart.update);

This will update the chart when the window is resized. Which may happen in the case of popup window.

I am not sure how you open the popup window. You could use

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