ExtJs 케이크 그림에 데이터 기록이 100%일 때 tooltip과 이벤트가 잘못되었습니다.

4229 단어 extjsextjs-전도

ExtJs 케이크 그림에 데이터 기록이 100%일 때 tooltip과 이벤트가 잘못되었습니다.


문제 설명

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로 구축하면 이 파일을 오버라이드 폴더에 넣고 실행해야 합니다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

좋은 웹페이지 즐겨찾기