问

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

asdvuj 发布于 2023-01-18 19:31

我正在试图绘制一个dimple.js svg条形图,它嵌套在jquery-ui标签和accordeon中,我将其用于我的网站布局,我非常绝望.在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时,一切正常,但我真的需要在所有数据返回之前显示选项卡(这可能需要一些时间).

请帮忙,我错过了什么？

1 个回答

这是一个基于dimple主页的简单示例复制问题的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/

我希望这有帮助.

约翰

2023-01-18 19:35 回答

rgx-秀_550

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签

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

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