Question

我有一些数据用于创建各种图表并在Web浏览器中显示。我使用像tornado，mathplotlib和pandas这样的包在python 2.7中实现这一点。问题是，每当我在网页中显示饼图时，饼图后面都会有2个额外的块。我不知道它来自哪里。

我有一个用户可以从中选择场景的场景列表。对于每个场景，都会显示一种单独的图形。只有在显示饼图时，我才会遇到饼图后面有额外条形的问题。正如您从图像中看到的那样，用户可以选择任何场景，并显示相应的图形。在要显示饼图的所有场景中，饼图后面都有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>

Answer 1

正如tcaswell正确指出的那样，我多次重复使用相同的轴/数字。这就是造成这种形象的原因。我在图表生成的第一行添加了public class ImageDownloaderInputStream implements InputStream { private byte[] buffer = null; private int bufLen = 0; private int bufIndex = 0; private boolean isContentValid; private InputStream wrapped; public ImageDownloaderInputStream (InputStream wrapped) { this.wrapped = wrapped; } @Override public ind read() { if(buffer == null) { // check content and fill buffer this.isContentValid = checkContent(); } if (this.isContentValid) { if(bufIndex < bufLen) { return buffer[bufIndex++] & 0xFF; } else { return wrapped.read(); } } else { // error handling: zero-length stream return -1; } } private boolean checkContent() { // fill the buffer this.buffer = new byte[1024]; this.bufLen = wrapped.read(this.buffer); // read more if not enough // check the content return true; // return false; } }，问题就解决了。

这就是我做的事情

plt.clf()

在HTML

1 个答案: