在HTML中顯示餅圖中的餅圖時的其他酒吧

我有一些數據使用我創建了各種圖形並顯示在Web瀏覽器中。我使用像龍捲風，mathplotlib和熊貓這樣的軟件包來實現Python 2.7中的這個功能。問題是，無論何時在網頁中顯示餅圖，餅圖後面都有2個附加塊。我不知道它來自哪裏。在HTML中顯示餅圖中的餅圖時的其他酒吧

我有一個用戶可以從中選擇場景的場景列表。對於每種情況，都會顯示一種單獨的圖形。只有在顯示餅圖時，我纔會在餅圖後面添加更多條。您可以從圖像中看到，用戶可以選擇任何場景並顯示適當的圖形。在所有需要顯示餅圖的情況下，餅圖後面都有2個藍色條。藍色條來自我猜想的前一個場景。

這是我的Python代碼：

import pandas as pd 
import matplotlib.pyplot as plt 
import logging 
import io 
#create logger 
logger = logging.getLogger("Overall") 

#create console handler 
logging.basicConfig(filename='logfiles/Overall.log',level=logging.DEBUG, 
    FORMAT='%(asctime)s.%(msecs)d %(levelname)s %(module)s - %(funcName)s: %(message)s') 



def overall_level(): 
''' 
This module is used to overall Level (HL,IL,LL) 
''' 
try: 
    with open('FormattedSample.csv') as fopen: 
     high,inter,low,rem = 0,0,0,0; 
     head_list = fopen.readline() 
     heading = head_list.split(",") 
     ind = heading.index("mathscl") 
     for data in fopen: 
      line=data.split(',') 

      #checking the math scale score to find the count 
      if(float(line[ind]) >= 275): 
       high += 1 
      elif(float(line[ind]) >= 230 and float(line[ind]) < 275): 
       inter += 1 
      elif(float(line[ind]) >= 226 and float(line[ind]) < 230): 
       low += 1 
      else: 
       rem += 1 
except IOError as e: 
    print e.strerror 
    #'application' code 
    logger.error(e.strerror) 
except: 
    print "Sorry for the inconvience\nWe Will Rectificy soon" 

    #Exception will be stored in overall 
    logger.exception("Unexpected Error:") 

else: 
    print "HIgher End",high 
    print "Intermediate End",inter 
    print "Low End",low 
    print "Remaining",rem 

    # Graphs in the pie chart 

    x = pd.Series([high,inter,low,rem],name="") 
    plt.title("Overall Count Percentage of Levels") 
    x.plot(kind='pie', labels=['High Level', 'Intermediate', 'Low Level', 'Remaining'], colors=['r', 'g', 'b', 'c'], 
      autopct='%.2f', fontsize=20, figsize=(7, 7)) 

    memdata = io.BytesIO() 
    plt.grid(True) 
    plt.savefig(memdata, format='png') 
    image = memdata.getvalue() 
    return image

我無法找到一個方法來消除這種額外的吧。這是我的HTML代碼。事實上，我只添加了必要的HTML代碼

<!DOCTYPE HTML> 
    <html> 
    <head><title>Main Page</title> 
    <link rel="stylesheet 
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script   
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
    </script> 
    <scrip 
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> 
    </script> 
    <style> 

    .test + .tooltip > .tooltip-inner { 
     background-color: #3A2734; 
     color: #857E00; 
     border: 1px ; 
     padding: 5px; 
     font-size: 20px; 
     width: 1500%; 
    } 
    </style> 
    </head> 
    <body> 
    <table> 
    <tr><td> <img src="logos.jpg" width="100%" height="50%" /> </td> <td> 

    <div><center> 
    <h3> Data Analytics & Visualization on Students Achievement in Mathematics   
    on National Achievement Survey 
    </h3> 
    </center></div> </td></tr> 
    </table> 
    <iframe width="100%" height="500px"   
     src="http://localhost:8870/comparisionstates" name="iframe"></iframe> 

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="#">Select Scenarios</a> 
    </div> 

    <div> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="http://localhost:8870/comparisionstates"  
     target="iframe">Home</a></li> 
     <li><a class="test" href="http://localhost:8870/statewisepass" data- 
     toggle="tooltip" data-placement="top" target="iframe" title="OverAll 
     State Pass and Fail Percentage">1</a></li> 
     <li><a class="test" href="http://localhost:8870/indiState" data- 
     toggle="tooltip" data-placement="top" target="iframe" title="Individual 
     State Wise Pass and Fail Percentage">2</a></li> 
     <li><a class="test" href="http://localhost:8870/comparisionstates" data-toggle="tooltip" data-placement="top" target="iframe" title="Comparision State wise Pass and Fail Percentage">3</a></li> 
     <li><a class="test" href="#" data-toggle="tooltip" data-placement="top" target="iframe" title="State and Gender Wise Pass and Fail Percentage">4</a></li> 
     <li><a class="test" href="#" target="iframe" data-toggle="tooltip" data-placement="top" title="Area and Gender Wise Pass and Fail Percentage">5</a></li> 
     <li><a class="test" href="#" data-toggle="tooltip" data-placement="top" target="iframe" title="Top Scorer">6</a></li> 
     <li><a class="test" href="#" data-toggle="tooltip" data-placement="top" target="iframe" title="Gender wise High Level,Intermediate Level,Low Level percentage">7</a></li> 
     <li><a class="test" href="#" data-toggle="tooltip" data-placement="top" target="iframe" title="Medium Wise Pass and Fail Percentage">8</a></li> 
     <li><a class="test" href="#" data-toggle="tooltip" data-placement="top" target="iframe" title="Area Medium Wise">9</a></li> 
     <li><a class="test" href="http://localhost:8870/overalllevel" data-toggle="tooltip" data-placement="top" target="iframe" title="Overall Count of High Level,Intermediate Level,Low Level">10</a></li> 
     </ul> 
    </div> 
      </div> 
    </nav> 


    <script> 
$(document).ready(function(){ 
    $('[data-toggle="tooltip"]').tooltip(); 
}); 
</script> 

</body> 

</html>

來源

2015-12-12 pravn0993

。最簡單的解決方法是調用'plt.clf（）'。更好的解決方案是使用OO接口。 – tacaswell

謝謝，先生，它的工作。我在圖的開頭添加了'plt.clf（）'，它工作正常。 – pravn0993

你應該回答你自己的問題。 – tacaswell

通過tcaswell作爲正確地指出，我是相同的軸/數字多次重新使用。這就是這種形象的原因。我在圖的第一行添加了plt.clf()，問題解決了。

這裏是我要重新使用同一個軸/圖多次做

plt.clf() 
x = pd.Series([high,inter,low,rem],name="") 
plt.title("Overall Count Percentage of Levels") 
x.plot(kind='pie', labels=['High Level', 'Intermediate', 'Low Level' 
'Remaining'], colors=['r', 'g', 'b', 'c'], 
     autopct='%.2f', fontsize=20, figsize=(7, 7)) 

memdata = io.BytesIO() 
plt.grid(True) 
plt.savefig(memdata, format='png') 
image = memdata.getvalue() 
return image

來源

2015-12-14 11:44:59 pravn0993

在HTML中顯示餅圖中的餅圖時的其他酒吧

回答

相關問題