ExtJs 当饼图只有一项数据记录占比为100%时tooltip和events无效问题修复

ExtJs 当饼图只有一项数据记录占比为100%时tooltip和events无效问题修复

问题描述

var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'number'],
        data: [{
            'name': 'Homer',
            "number": 100
        }]
    });

Ext.create({
    xtype: 'panel',
    layout: {
        type: 'vbox'
    },
    items: [{
        xtype: 'polar',
        store: store,
        insetPadding: 20,
        innerPadding: 20,               
        legend: {
            docked: 'bottom'
        },
        interactions: ['rotate'],
        series: [{
            type: 'pie',
            label: {
                display: 'outside',
                field: 'name'
            },
            xField: 'number',
            tooltip: {
                style: 'background: #fff',
                renderer: function(storeItem, item) {
                    this.setHtml('test');

                }

            }
        }],
        width: '100%',
        height: 300
    }],
    width: 500,
    height: 600,
    renderTo: Ext.getBody()
});

当只有一项数据记录,饼图占比为100%时不显示tooltip,并且itemclick事件无效,演示地址: https://fiddle.sencha.com/#fiddle/c42&view/editor

解决方法

重写饼图的betweenAngle方法,如果使用Sencha Cmd构建,应将此文件放入overrides文件夹内执行 sencha app refresh

Ext.define('overrides.chart.Pie', {
    override: 'Ext.chart.series.Pie',
    betweenAngle: function(x, a, b) {
        if (a === 0 && b > (Math.PI*2-0.00000001)) {
            return true;
        } else {
            var pp = Math.PI * 2,
            offset = this.rotationOffset;
            if (!this.getClockwise()) {
                x *= -1;
                a *= -1;
                b *= -1;
                a -= offset;
                b -= offset;
            } else {
                a += offset;
                b += offset;
            }
            b -= a;
            x -= a;
            x %= pp;
            b %= pp;
            x += pp;
            b += pp;
            x %= pp;
            b %= pp;
            return x < b;
        }
    }
});

修复后的效果演示地址: https://fiddle.sencha.com/#fiddle/jjq&view/editor