extjs4: Как добавить пользовательский слушатель и всплывающую подсказку к диаграмме? - PullRequest
Новая
       3

extjs4: Как добавить пользовательский слушатель и всплывающую подсказку к диаграмме?

5 голосов
/ 02 июня 2011

Я создаю радиолокационную карту для отображения данных, и она работает просто отлично. Однако заголовки, которые появляются в легенде, могут быть очень длинными. Прямо сейчас у меня есть сокращенная версия заголовка в легенде, но мне бы хотелось, чтобы при наведении указателя мыши на заголовок легенды всплывала всплывающая подсказка или всплывающая подсказка с полным заголовком / надписью. Из того, что я вижу в документации API, я вижу, что вы можете добавить слушателя ко всей диаграмме, но не только к заголовкам легенды.

Тем не менее, вы можете щелкнуть элемент легенды, чтобы отобразить / скрыть данные, поэтому есть некоторый тип функций прослушивания. Любые идеи, как я могу добавить пользовательский слушатель при наведении курсора на легенду следующей радиолокационной карты? 

Ext.define("COM.view.portlet.RadarChart", {
extend  : "Ext.panel.Panel",
alias   : "widget.myradarchart",
requires: ["Ext.chart.theme.Base", "Ext.chart.series.Series"],

initComponent: function () {
    //@fixme: Why is the first radar not show x-axis lines?
    Ext.apply(this, {
        layout: "fit",
        width: 600,
        height: 300,
        items: {
            xtype: 'chart',
            style: 'background:#fff',
            theme: 'Category2',
            insetPadding: 20,
            animate: true,
            store: 'Seoradar',
            legend: {
                position: "bottom"
                //ADDING LISTENERS HERE DOESN'T WORK
            },
            axes: [{
                type: "Radial",
                position: "radial",
                maximum: 100,
                label: {
                    font: "11px Arial",
                    display : "none"
                }
            }],
            series: [{
                showInLegend    : true,
                showMarkers     : true,
                markerConfig: {
                    radius  : 2,
                    size    : 2
                },
                type    : 'radar',
                xField  : 'name',
                yField  : 'site0',
                style: {
                    opacity: 0.4
                }
            },{
                showInLegend    : true,
                showMarkers     : true,
                type            : 'radar',
                xField          : 'name',
                yField          : 'site1',
                style: {
                    opacity: 0.4
                }
            }]
        }
    });
    this.callParent(arguments);
}

});

Ответы [ 2 ]

1 голос
/ 28 июня 2012

Если вы хотите получить это событие из диаграммы, вы можете переместить его из серии в диаграмму, сказав: 

       {
            'type' : 'line',
            'axis' : 'left',
            'highlight' : true,
            'listeners' : {
                'itemmousedown' : function(event){
                    event.series.chart.fireEvent('itemmousedown', event);
                }
            }
       }

, поэтому в контроллере вы можете сказать: 

this.control({
    'chart' : {
         'itemmousedown' : function(event){
             //do your stuff here
         }
    }
});

!! ВНИМАНИЕ !!

Я заметил, что эти события mousedown выполняются не в контексте контекста пользовательского интерфейса, поэтому мне не удалось показать окно в контекстеОбработчик события.Мне пришлось обойти это, используя setTimeout и сохранить четный объект где-нибудь.Я думаю, может быть, это потому, что в некоторых браузерах рендеринг SVG аппаратно ускоряется.

0 голосов
/ 15 июня 2011

Вы можете добавить слушателей в вашей конфигурации series.Вы можете увидеть, какие события доступны здесь . 

series: [
    {
        type: 'column',
        axis: 'left',
        listeners: {
            'itemmouseup': function() {
                //do something
            }
        },
        xField: 'category',
        yField: 'data1'
    }
]
...