django ersetzt kein altes Bild

Ich habe eine Django-App, die das Bild im Browser basierend auf der über die Benutzeroberfläche vorgenommenen Auswahl plottet. Immer wenn eine Änderung in der Benutzeroberfläche erfolgt, wird eine JavaScript-Funktion aufgerufen, die einen Aufruf zur Django-Ansicht erstellt.django ersetzt kein altes Bild

Immer wenn ich die Benutzeroberfläche vom Browser ändere, wird ein neues Bild von einer Funktion in view.py erstellt und als HTTPResponse an Javascript zurückgegeben, das schließlich das Bild im Browser abbildet.

Problem hier ist, dass die alte Bild nicht entfernt bekommt und ein neues Bild wird auf Browser aufgetragen, die unter

wie Bildern sieht

Dies ist, wenn eine Seite zum ersten Mal

geladen wird, wenn UI ist auf PCA geändert

Als ich Kmeans wieder gewählt, es zeigt immer noch die vorherige grafische Darstellung

Ich habe überprüft, dass alle Berechnungen in vieces.py vorgenommen werden und Werte an Vorlagen zurückgegeben werden.

views.py 
class PlotTool(View): 

@staticmethod 
def kmeansPlot(request): 
    [X,labels] = cluster_kmeans(request.GET.get('value')) 
    color = ["g", "r", 'purple','olive','teal','orchid','darkorange'] 
    size = [90] * len(X) 
    for i in xrange(len(X)): 
     plt.scatter(X[i][0], X[i][1], c=color[labels[i]],s=size[i]) 

    #To Show Centroids on Plot 
    plt.title('Kmeans') 
    plt.grid(True) 

    # Store image in a string buffer 
    buffer = StringIO.StringIO() 
    canvas = pylab.get_current_fig_manager().canvas 
    canvas.draw() 
    pilImage = PIL.Image.fromstring("RGB", canvas.get_width_height(), canvas.tostring_rgb()) 
    pilImage.save(buffer, "PNG") 
    response = HttpResponse(buffer.getvalue(), content_type="image/png") 
    return response 


    @staticmethod 
def PCAPlot(request): 

    score,coeff,labels = pcaAnalysis() 
    xs = score[:,0] 
    ys = score[:,1] 
    n=coeff.shape[0] 
    scalex = 1.0/(xs.max()- xs.min()) 
    scaley = 1.0/(ys.max()- ys.min()) 
    plt.scatter(xs*scalex,ys*scaley) 
    for i in range(n): 
     plt.arrow(0, 0, coeff[i,0], coeff[i,1],color='r',alpha=0.5) 
     if labels is None: 
      plt.text(coeff[i,0]* 1.15, coeff[i,1] * 1.15, "Var"+str(i+1), color='g', ha='center', va='center') 
     else: 
      plt.text(coeff[i,0]* 1.15, coeff[i,1] * 1.15, labels[i], color='g', ha='center', va='center') 

    plt.title('PCA') 
    plt.xlim(-1,1) 
    plt.ylim(-1,1) 
    plt.xlabel("PC{}".format(1)) 
    plt.ylabel("PC{}".format(2)) 
    plt.grid() 

    # Store image in a string buffer 
    buffer = StringIO.StringIO() 
    canvas = pylab.get_current_fig_manager().canvas 
    canvas.draw() 
    pilImage = PIL.Image.fromstring("RGB", canvas.get_width_height(), canvas.tostring_rgb()) 
    pilImage.save(buffer, "PNG") 
    response = HttpResponse(buffer.getvalue(), content_type="image/png") 
    return response

Python 2.7.10, Django 1.9 Jede Hilfe ist willkommen ... Danke

EDIT: Voll Java Script-Code

<body> 
 
<div class="container"> 
 
<div class="col-left"> 
 
<form action='#' method="get"> 
 
    <div> 
 
    <label>No of Cluster</label> 
 
    </div> 
 

 
    <input id="slider1" type="range" class="myinput" value="3" min="2" max="10" step="1" onchange="callFun(dropdown1.value,this.value)" /> 
 
    <div class="count"><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span style="border:none">10</span></div> 
 
</form> 
 
</div> 
 
    <div class="col-right"> 
 
    <label>Select Clustering Method</label> 
 

 
<select name="test" id="dropdown1" onchange="callFun(this.value,slider1.value)"> 
 
    <option value="Kmeans Clustering" selected>Kmeans Clustering</option> 
 
    <option value="Birch Clustering">Birch Clustering</option> 
 
    <option value="PCA Plot">PCA Plot</option> 
 
</select> 
 

 
</div> 
 

 
<div style="width:100%; float:left;margin-top:30px;"> 
 
<img id="im" src='{% url "kmeans_graph" %}' align="left" height="400" width="400" > 
 

 
<p id="demo">3</p> 
 
</div> 
 
    </div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script> 
 

 
<script> 
 
     function callFun(value1,value2) { 
 
      if (value1 == 'Kmeans Clustering'){ 
 
       var img_src = '{% url "kmeans_graph" %}' 
 
       document.getElementById("im").setAttribute("src",img_src + '?value=' + value2); 
 
       document.getElementById("demo").innerHTML =value2 
 
      } 
 

 
      else if(value1 == 'Birch Clustering'){ 
 
       var img_src = '{% url "birch_graph" %}' 
 
       document.getElementById("im").setAttribute("src",img_src + '?value=' + value2); 
 
       document.getElementById("demo").innerHTML =value2 
 
      } 
 

 
      else{ 
 
       var img_src = '{% url "pca_graph" %}' 
 
       document.getElementById("im").setAttribute("src",img_src + '?value=' + Math.random()); 
 
       document.getElementById("demo").innerHTML ='pca_graph' 
 
      } 
 
     } 
 
    </script> 
 

 

 
</body> 
 
</html>

Quelle

2016-08-09 utkarsh

Haben Sie überprüft, was 'Wert1 ist, wenn' callFun' aufgerufen wird? – EngineerCamp

@EngineerCamp Ich habe nur Wert1 überprüft ... Es gibt die gleiche Ausgabe wie erwartet – utkarsh

die Antwort. ..

in Ansichten. py

buffer = StringIO.StringIO() 
canvas = pylab.get_current_fig_manager().canvas 
canvas.draw() 
pilImage = PIL.Image.fromstring("RGB", canvas.get_width_height(), canvas.tostring_rgb()) 
pilImage.save(buffer, "PNG") 
response = HttpResponse(buffer.getvalue(), content_type="image/png") 
return response

In dem obigen Code pylab.get_current_fig_manager().canvas erhält den aktuellen Bild-Manager, das gleiche, jedes Mal ist die, warum es wurde alt Bildausgabe über statt neues Bild zu schaffen. Also änderte ich den Code als

fig = Figure() 
ax = fig.add_subplot(111) 
#change all plt instances with ax 

canvas=FigureCanvas(fig) 
response = HttpResponse(content_type='image/png') 
canvas.print_png(response)

Das ist für mich gearbeitet hat

Quelle

2016-08-09 08:22:52 utkarsh

Antwort

Verwandte Themen