Problème de rendu de l'axe Rickshaw JS lorsqu'il est appelé dans la fonction de réussite AJAX

Question

Je crée un graphique à l'aide de Rickshaw JS. Pour ce faire, j'ai créé une fonction qui, lorsqu'elle est appelée, rend le graphique. Le problème auquel je suis confronté est lorsqu'il est appelé dans les balises de script, la fonction rend tout bien, comme je l'attends. Cependant, lorsqu'ils sont appelés depuis la fonction de succès d'un appel AJAX, les axes n'apparaissent pas.

extrait de code pertinent:

<script> 
function ProbabilityPlot(a) { 
    var graph = new Rickshaw.Graph({ 
     ... 
    }); 
    graph.render(); 

    var xAxis = new Rickshaw.Graph.Axis.X({ 
     ... 
    }); 
    xAxis.render(); 

    var yAxis = new Rickshaw.Graph.Axis.Y({ 
     ... 
    }); 
    yAxis.render(); 
}; 

$.ajax({ 
    url: plotURl, 
    dataType: 'json', 
    cache: false, 
    success: function(data) { 
     ProbabilityPlot([ {{plot_data}} ]); <-- axes do NOT work 
    } 
}); 

ProbabilityPlot([ {{plot_data}} ]); <-- eveything works perfectly 
</script> 

Je peux vérifier que les paramètres transmis sur la fonction sont les mêmes dans les deux cas.

Answer 1

Vous ne savez pas comment il a été réparé ou quel est le problème sous-jacent, mais le correctif (au moins pour l'instant) consistait à déplacer les scripts vers la tête du code HTML.

<script src="{% static "Home/js/vendor/jquery.js" %}"></script> 
<script src="http://code.shutterstock.com/rickshaw/vendor/d3.v3.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.js"></script>