Fatal编程技术网
  • python-2.7/
  • Python 2.7 在HTML格式的iframe中显示饼图时的其他条形图

Python 2.7 在HTML格式的iframe中显示饼图时的其他条形图

python-2.7 pandas matplotlib

Python 2.7 在HTML格式的iframe中显示饼图时的其他条形图,python-2.7,pandas,matplotlib,tornado,Python 2.7,Pandas,Matplotlib,Tornado,我有一些数据，我使用这些数据创建了各种图形，并显示在web浏览器中。我使用tornado、mathplotlib和pandas等包在python 2.7中实现了这一点。问题是，每当我在网页中显示饼图时，饼图后面还有两个额外的块。我不知道它是从哪里来的 我有一个场景列表，用户可以从中选择场景。对于每个场景，将显示一种单独的图形。只有在显示饼图时，我才遇到这样的问题，即饼图后面有额外的条形图。从图中可以看出，用户可以选择任何场景，并将显示相应的图形。在所有显示饼图的场景中，饼图后面有2个蓝色条。我猜

我有一些数据，我使用这些数据创建了各种图形，并显示在web浏览器中。我使用tornado、mathplotlib和pandas等包在python 2.7中实现了这一点。问题是，每当我在网页中显示饼图时，饼图后面还有两个额外的块。我不知道它是从哪里来的

我有一个场景列表，用户可以从中选择场景。对于每个场景，将显示一种单独的图形。只有在显示饼图时，我才遇到这样的问题，即饼图后面有额外的条形图。从图中可以看出，用户可以选择任何场景，并将显示相应的图形。在所有显示饼图的场景中，饼图后面有2个蓝色条。我猜蓝色条来自之前的场景

这是我的python代码：

我找不到一种方法来移除这些额外的条。这是我的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>
正如正确指出的，我多次重复使用相同的轴/图形。这就是为什么会有这样的形象。我在图形生成的第一行添加了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
您多次使用相同的轴/图形。最简单的解决方案是调用plt.clf。更好的解决方案是使用OO接口。谢谢你，先生，它成功了。我在图表的开头添加了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