Question

我正在制作一个条形图，我希望点击它可以在缩短长标签之间切换。然而，听众似乎没有工作。我搜索了一下，发现很多人都在谈论它是一个bug，但是这些帖子都是旧版本（5），我不知道是否仍然存在。这是完整的图表类：

Ext.define ('SenchaApp.view.barchart.BarChart', {

    extend : 'Ext.chart.CartesianChart',
    requires : [ 'SenchaApp.store.Personnel' ],
    xtype : 'bar_chart',
    reference : 'bar_chart',
    itemId : 'bar_chart',

    plugins: {
        ptype: 'chartitemevents',
        moveEvents: true
    },

    store : {
        type : 'personnel'
    },

    label_length : 10,
    shorten_labels : true,

    flipXY : true,

    axes: [{
                type: 'numeric',
                position: 'bottom',
                fields: 'phone',
                title: {
                    text: 'Inventory',
                    fontSize: 15
                },
                grid: {
                    odd: {
                        fillStyle: 'rgba(255, 255, 255, 0.06)'
                    },
                    even: {
                        fillStyle: 'rgba(0, 0, 0, 0.03)'
                    }
                },
            }, {
                type: 'category',
                position: 'left',
                title: {
                    text: 'People',
                    fontSize: 15
                },
                fields: 'name',
                label : {
                    hidden : false
                },



                renderer : function (axis, data) {
                    var str = data;
                    var chart = axis.getChart();
                    if (str.length > chart.label_length && chart.shorten_labels) {
                    str = str.substring(0, chart.label_length-1)+"...";
            }
            return str;
                },
                style: {
                estStepSize : 1
            }
    }],
        series: {
            type: 'bar',
                xField: 'name',
                yField: 'phone',

                listeners: {
                itemtap : function(series) {
                        var chart = series.getChart();
                        alert('mouse down event');
                        chart.shorten_labels = !chart_shorten_labels;
                }
            }
        },

        initComponent : function () {           
            this.callParent(arguments); 
            this.axes[1].override_label_bbox (true, 2);
        }


})

Answer 1

如果监听器未按预期工作，请执行以下步骤：仔细阅读the listener docs：

在系列项目上发生点击事件时触发。 注意：此事件需要将Ext.chart.plugin.ItemEvents插件添加到图表中。

第二步是查看in the Sencha code以查找以下内容：

    chart.addElementListener({
        click: handleEvent,
        dblclick: handleEvent,
        mousedown: handleEvent,
        mousemove: handleEvent,
        mouseup: handleEvent,
        mouseover: handleEvent,
        mouseout: handleEvent,
        // run our handlers before user code 
        priority: 1001,
        scope: this
    });

与

一起

handleEvent: function (e) {
    ...
        chart.fireEvent('item' + e.type, chart, item, e);
        item.series.fireEvent('item' + e.type, item.series, item, e);

tap事件未注册，因此根本无法触发itemtap。如果你绑定到itemclick，另一方面......

It's working!

Extjs 6添加图表鼠标监听器

1 个答案: