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

来源:互联网 发布:我赢职场java视频 编辑:程序博客网 时间:2024/06/05 04:08

学习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
            }
        });