extjs4: как добавить пользовательский прослушиватель и подсказку к диаграмме?
Я создаю радарную диаграмму для отображения данных, и она отлично работает. Однако названия, которые появляются в легенде, могут быть очень длинными. Сейчас у меня есть он, показывающий сокращенную версию заголовка в легенде, но я хотел бы, чтобы, когда пользователь делает наведение мыши на заголовок легенды, всплывающая подсказка или некоторое время пузырька, который показывает полный заголовок/метку. Из того, что я вижу в документах 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 ответов:
Если вы хотите убрать это событие из графика, вы можете поднять его из серии к диаграмме, сказав:
{ '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 выполняются в другом contaxt, чем контекст пользовательского интерфейса, поэтому я не смог показать окно в контексте обработчика событий. Я должен был обойти это с помощью setTimeout и сохранить eventobject где-то. Я думаю, может быть, это потому, что на некоторые браузер рендеринга SVG-это аппаратное ускорение.
Вы можете добавить слушателей в свою конфигурацию
series. Вы можете посмотреть, какие события доступны здесь.series: [ { type: 'column', axis: 'left', listeners: { 'itemmouseup': function() { //do something } }, xField: 'category', yField: 'data1' } ]
Comments