ExtJS 饼状图报表

简单的ExtJS饼状图报表。

先上源码,咱再慢慢解析:

Ext.onReady(function(){
                var store = Ext.create('Ext.data.JsonStore', {
                    fields: ['name', 'data'],
                    data: [
                        { 'name': '北京',   'data': 10 },
                        { 'name': '天津',   'data':  5},
                        { 'name': '上海',   'data':  8 },
                        { 'name': '深圳',   'data':  7 },
                        { 'name': '广州',   'data':  6 },
                        { 'name': '济南',   'data':  5 },
                        { 'name': '郑州',   'data':  4 },
                        { 'name': '石家庄',   'data':  3 }
                    ]
                });
                Ext.create("Ext.panel.Panel",{
                    width:600,
                    height:500,
                    title:"饼状图",
                    layout:"fit",
                    renderTo:Ext.getBody(),
                    items:[{
                        xtype:"chart",
                        store:store,
                        animate:true,
                        legend: {
                            position: 'right'
                        },
                        series:[{
                            type:"pie",
                            field:"data",
                            donut:true,
                            showInLegend: true,
                            label:{
                                display:"name",
                                contrast:true,
                            },
                            tips:{
                                trackMouse:true,
                                renderer:function(storeItem,item){
                                    var total = 0;
                                    store.each(function(rec) {
                                        total += rec.get('data');
                                    });
                                    this.setTitle(storeItem.get("data"));
                                }
                            },
                            highlight:{
                                segment:{
                                    margin:20
                                }
                            },
                            listeners:{
                                itemclick:function(o){
                                    var rec=store.getAt(o.index);
                                    alert(rec.get("data"));
                                }
                            }
                            
                        }]
                    }]
                });
            })

上述代码便是一个简单的饼状图,数据这里我采用的是本地数据。

示例效果如下图所示:

现在我们来解析一下上面的代码:

里面的store存储数据,这里我就不详细解释了。我这里采用的是本地的数据。

如效果图所示,我采用了一个panel来包含该饼状图。

xtype:"chart" :创建一个图表

series:是为所有图标系列包含公共逻辑抽象类。属性type:"pie",用来表示采用的是饼状报表。

field:"data":当前饼状图块中的数据值。

display:"name":如上图所示,是用来显示饼状图中的文字的。

tips:这里是用来显示鼠标放在饼状图上的时候,给你的一个提示。用来显示当前图块的信息。

trackMouse:true:此属性设置为true表示提示框跟随你的鼠标而动。

segment:该属性是用来控制,当鼠标放在当前图块中的时候分开的距离。这里margin一般为20 当数值比20 大或者小的时候则会出现一些空白。具体效果可以自己稍微尝试一下。

lengend和showInLegend:这两个必须同时设置,操作右侧的小图例。

itemclick:点击事件。这个事件需要设置在series中,否则无法触发。

以上是我对这个饼状图的一些个人理解。如有什么不足还请各位大神指教。

转载于:https://www.cnblogs.com/dolphin-gjh/p/4146956.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值