在python中实现数据生成饼图，并且饼图要显示在HTML页面中

小和与Django

于 2013-11-22 17:49:15 发布

6791

分类专栏： python

本文链接：https://blog.csdn.net/u012475710/article/details/16888561

版权

python 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我找了很多的资料，包括python的各种库，但是生成的都是饼图这样的jpg,png,svg等图片的格式，或者就是作为一个新的窗口弹出页面，这样，并不能实现我想要的结果，所以，我找了其他的办法

同事给我说了ExtJS这个框架，我下载配置之后，发现功能真的很强大呀，

根据上边提示的例子我自己写了一下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />  
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>  
<script type="text/javascript" src="../ext-all.js"></script> 
<script>
	Ext.onReady(function(){
    var data=[
              {name:'<$100',ot:33.33},
              {name:'$100-500',ot:44.87},
              {name:'$500-1000',ot:11.54},
              {name:'$1000-5000',ot:9.62},
              {name:'$5000-1000',ot:0.64}
			  //{name:'和八',ot:77}
               ];
    var store=Ext.create('Ext.data.Store',{  
        fields:['name','ot'],  
        autoLoad:true,  
        proxy:'memory',  
        data:data
        });
	//store.loadData(data(6, 20));
     var chart3=Ext.create('Ext.chart.Chart',{
          renderTo:Ext.getBody(),
		  xtype: 'piechart',
          animate:true,  
          store:store,  
		  layout: 'fit',
          width:500,  
          height:400,  
		  shadow: true,
          legend: {        
            position: 'right'        //定位
          },  
		  insetPadding: 30,
		  highlightDuration: 200,
		  theme: 'Base:gradients',
          series: [{   
		    type:'pie',   //统计图的类型
			field:'ot',   //根据ot字段来分扇区的大小
			showInLegend: true,   
			//colorSet: ['#4EEE94','#63B8FF','#836FFF','#8A2BE2','#7FFF00','#FF0000'],
			label: {    
                field: 'name',    //扇区里显示的字段
                display: 'rotate',   
                contrast: true,    
                font: '12px Arial'   
            },
			tips: {
			   trackMouse: true,
			   width:140,
			   height:28,
			   renderer: function(storeItem, item) {
			       var total = 0;
				   store.each(function(rec) {
				       total += rec.get('ot');
				   });
				   this.setTitle(storeItem.get('name') + ':' + Math.round(storeItem.get('ot') /total * 100) + '%');
			   }
			},  //tip结束
			highlight:{  
             segment:{   
                margin:20  //扇区的margin
              }
            },  
			donut: 40
        }]   
    })  

    });
</script>
</head>

<body>

</body>
</html>
</body>
</html>

这样就实现了这样的功能，可是还是有一个问题，就是这样子，我最多只能写入五组数据，如果超出了，就会出错，没有显示的结果了，

我一直都找不出来原因，忘各位大神看到后知道的请赐教呀！小妹在这里谢过了！

小和与Django

关注

0
点赞
踩
5
收藏
打赏
0
评论
在python中实现数据生成饼图，并且饼图要显示在HTML页面中

我找了很多的资料，包括python的各种库，但是生成的都是饼图这样的jpg,png,svg等图片的格式，或者就是作为一个新的窗口弹出页面，这样，并不能实现我想要的结果，所以，我找了其他的办法同事给我说了ExtJS这个框架，我下载配置之后，发现功能真的很强大呀，根据上边提示的例子我自己写了一下：无标题文档 Ext.onReady(function(){
复制链接

扫一扫