您的位置：首页 > 编程语言 > Python开发

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

2013-11-22 17:49 1011 查看

我找了很多的资料，包括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>

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航