代码之家 › 专栏 › 技术社区 › Martin

在jquery之后绘制酒窝.js图表时,Firefox中的NS_ERROR_FAILURE

dimple.js d3.js firefox jquery

Martin · 技术社区 · 11 年前

我正在尝试绘制一个酒窝.js svg条形图,它嵌套在jquery ui选项卡和手风琴中,我用它来做我的网站布局,我感到非常绝望。在Chrome和IE中一切正常,但FF不断抛出NS_ERROR_FAILURE异常。下面是代码段:

function drawDimpleChart(){
  d3.json("synkon-dat.php", function (data) {
    var svg = dimple.newSvg("#graph-txttypy-d3", 590, 400);     
    var myChart = new dimple.chart(svg, data); 
    myChart.setBounds(100, 70, 480, 150);
    myChart.addPctAxis("x", "ratio");  
    myChart.addCategoryAxis("y", "kategorie");  
    myChart.addSeries("varianta", dimple.plot.bar);       
    myChart.addLegend(200, 10, 380, 20, "right"); 
    myChart.draw();
  }); 
}

$(document).ready(function() { 
  $("#tabs").tabs();
  $(".accordion").accordion({ active: 'none', clearStyle: true });
  drawDimpleChart();
});

我已经意识到这个问题与jquery和绘图函数的执行顺序有关。当我在.draw方法之后的回调中调用jquery时,一切都正常,但我确实需要在所有数据返回之前显示选项卡(这可能需要一些时间)。

请帮忙,我错过了什么?

2 回复 | 直到 11 年前

John Kiernander 11 年前

这里有一个jsFiddle,它基于酒窝主页上的简单示例来复制问题(在这个示例中,图表在选项卡2上):

function drawDimpleChart(){
    var svg = dimple.newSvg("#tabs-2", 800, 600);
    var data = [
        { "Word":"Hello", "Awesomeness":2000 },
        { "Word":"World", "Awesomeness":3000 }
    ];
    var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "Word");
    chart.addMeasureAxis("y", "Awesomeness");
    chart.addSeries(null, dimple.plot.bar);
    chart.draw();
}

$(document).ready(function() { 
    $("#tabs").tabs();
    drawDimpleChart();
});

http://jsfiddle.net/VGwGc/5/

问题与以下问题有关:

https://github.com/PMSI-AlignAlytics/dimple/issues/34

Dimple对SVG进行了大量测量,当div(因此SVG)被隐藏时,这是不可能的。在firefox以外的浏览器中,标签对齐会出错,但firefox会抛出NS_ERROR_FAILURE错误。

解决方案是绘制到一个可见的div,并在绘制完成后立即将其移动到隐藏的div中。你可以看到它在这把小提琴中发挥作用:

function drawDimpleChart(){
    var svg = dimple.newSvg("#chartTab", 600, 400);
    var data = [
        { "Word":"Hello", "Awesomeness":2000 },
        { "Word":"World", "Awesomeness":3000 }
    ];
    var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "Word");
    chart.addMeasureAxis("y", "Awesomeness");
    chart.addSeries(null, dimple.plot.bar);
    chart.draw();
    $("#chartTab").appendTo("#tabs-2");
}

$(document).ready(function() { 
    $("#tabs").tabs();
    drawDimpleChart();
});

http://jsfiddle.net/VGwGc/4/

我希望这有帮助。

约翰

Talchu 8 年前

我也遇到了同样的问题,一个隐藏的选项卡在FF中引发了错误。为了解决Firefox中的图表渲染问题,我(1)延迟了对draw函数的调用(例如。, setTimeout(chart.draw(), 2000); )以及(2)切换到像素尺寸(例如。, chart.setBounds (10,10,90,90)) )以解决Firefox中阻止图例正确显示的另一个问题。