linuxwindowsinboxwhatsappicloudtweetdeckhipchattelegramhangoutsslackgmailskypefacebook-workplaceoutlookemailmicrosoft-teamsdiscordmessengercustom-servicesmacos
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.3 KiB
76 lines
2.3 KiB
9 years ago
|
/**
|
||
|
|
* The ItemInfo interaction allows displaying detailed information about a series data
|
||
|
|
* point in a popup panel.
|
||
|
|
*
|
||
|
|
* To attach this interaction to a chart, include an entry in the chart's
|
||
|
|
* {@link Ext.chart.AbstractChart#interactions interactions} config with the `iteminfo` type:
|
||
|
|
*
|
||
|
|
* new Ext.chart.AbstractChart({
|
||
|
|
* renderTo: Ext.getBody(),
|
||
|
|
* width: 800,
|
||
|
|
* height: 600,
|
||
|
|
* store: store1,
|
||
|
|
* axes: [ ...some axes options... ],
|
||
|
|
* series: [ ...some series options... ],
|
||
|
|
* interactions: [{
|
||
|
|
* type: 'iteminfo',
|
||
|
|
* listeners: {
|
||
|
|
* show: function(me, item, panel) {
|
||
|
|
* panel.setHtml('Stock Price: $' + item.record.get('price'));
|
||
|
|
* }
|
||
|
|
* }
|
||
|
|
* }]
|
||
|
|
* });
|
||
|
|
*/
|
||
|
|
Ext.define('Ext.chart.interactions.ItemInfo', {
|
||
|
|
|
||
|
|
extend: 'Ext.chart.interactions.Abstract',
|
||
|
|
|
||
|
|
type: 'iteminfo',
|
||
|
|
alias: 'interaction.iteminfo',
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @event show
|
||
|
|
* Fires when the info panel is shown.
|
||
|
|
* @param {Ext.chart.interactions.ItemInfo} this The interaction instance
|
||
|
|
* @param {Object} item The item whose info is being displayed
|
||
|
|
* @param {Ext.Panel} panel The panel for displaying the info
|
||
|
|
*/
|
||
|
|
|
||
|
|
config: {
|
||
|
|
/**
|
||
|
|
* @cfg {Object} extjsGestures
|
||
|
|
* Defines the gestures that should trigger the item info panel to be displayed in ExtJS.
|
||
|
|
*/
|
||
|
|
extjsGestures: {
|
||
|
|
'start' : { event: 'click', handler: 'onInfoGesture'},
|
||
|
|
'move' : { event: 'mousemove', handler: 'onInfoGesture'},
|
||
|
|
'end' : { event: 'mouseleave', handler: 'onInfoGesture'}
|
||
|
|
}
|
||
|
|
|
||
|
|
// TODO:ps The trigger above should be 'itemclick', not 'click'.
|
||
|
|
},
|
||
|
|
|
||
|
|
item: null,
|
||
|
|
|
||
|
|
onInfoGesture: function (e, element) {
|
||
|
|
var me = this,
|
||
|
|
item = me.getItemForEvent(e),
|
||
|
|
tooltip = item && item.series.tooltip;
|
||
|
|
|
||
|
|
if (tooltip) {
|
||
|
|
tooltip.onMouseMove.call(tooltip, e);
|
||
|
|
}
|
||
|
|
if (item !== me.item) {
|
||
|
|
if (item) {
|
||
|
|
item.series.showTip(item);
|
||
|
|
} else {
|
||
|
|
me.item.series.hideTip(me.item);
|
||
|
|
}
|
||
|
|
me.item = item;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|