EXTJS6.0 饼图图例显示以及百分比显示

学习EXTJS6.0 饼状图报表。也是在自己工作中遇到过的一些问题。不大也不小,总之就是比较烦人的那种。效果图如下

然而在之前我的图例显示始终是这样的,图例部分只有文字没有前面那个框。然而网上大部分都是上图那样的。到后面发现在extjs4.0之后,官方就把报表的样式给单独分出去了。所以在自己页面还需要引用  <link href="Extjs/classic/charts/classic/classic/resources/charts-all.css" rel="stylesheet" />这个文件。加入之后,图例就显示正确。

2.如何在饼图上显示百分比。

  var percentchart = Ext.create({
            xtype: 'polar',
            anchor: '100% 100%',
            reference: 'chart',
            theme: 'default-gradients',
            store: storepercent,    
            legend: {
                docked: 'bottom'
            },
            interactions: ['rotate'],      
            series: {
                type: 'pie',              
                angleField: 'count',
                showInLegend: true,
                label: {
                    field: ['tName'],
                    renderer: function (text, sprite, config, rendererData, index) {
                        var Data = rendererData.store.data.items;
                        var thisdata = Data[index];
                        var percent = ((parseFloat(thisdata.get('count') / rendererData.store.sum('count')) * 100.0).toFixed(2))                     
                        return text + "-"+percent+"%";
                    }
                },
                tooltip: {
                    trackMouse: true,
                    renderer: function (tooltip, record, item) {
                        var value = ((parseFloat(record.get('count') / record.store.sum('count')) * 100.0).toFixed(2));
                        tooltip.setHtml(record.get('tName') + ': ' + value + '%');
                    }
                },
                donut: 0
            }
        });

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值