archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Fix 3267 Add "onHover" functionality for legend (#3271)

Browse Source 
Add "onHover" to the legend options that will hold a user defined function (default is null) and called when a "mousemove" event is registered on top of a label item, with same parameters as the "onClick" option.

Also introduced logic that determines if the type of event passed to the legend "handleEvent" function is one we can handle. Currently allowing "click" and "mousemove" events. If the event is not one of those we stop the function execution (this is for the sake of reusing the legend hitbox calculations).
This commit is contained in:
Lubomir Sotirov 2016-09-07 16:59:33 +02:00 committed by Simon Brunel
parent 52cdff5fc1
commit 38f85c98b5
4 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/01-Chart-Configuration.md
View File

@ -127,7 +127,8 @@ Name | Type | Default | Description
display | Boolean | true | Is the legend displayed
position | String | 'top' | Position of the legend. Possible values are 'top', 'left', 'bottom' and 'right'.
fullWidth | Boolean | true | Marks that this box should take the full width of the canvas (pushing down other boxes)
onClick | Function | `function(event, legendItem) {}` | A callback that is called when a click is registered on top of a label item
onClick | Function | `function(event, legendItem) {}` | A callback that is called when a 'click' event is registered on top of a label item
onHover | Function | `function(event, legendItem) {}` | A callback that is called when a 'mousemove' event is registered on top of a label item
labels |Object|-| See the [Legend Label Configuration](#chart-configuration-legend-label-configuration) section below.
#### Legend Label Configuration

7
src/core/core.controller.js
View File

@ -631,13 +631,14 @@ module.exports = function(Chart) {
hoverOptions.onHover.call(me, me.active);
}
if (me.legend && me.legend.handleEvent) {
me.legend.handleEvent(e);
}
if (e.type === 'mouseup' || e.type === 'click') {
if (options.onClick) {
options.onClick.call(me, e, me.active);
}
if (me.legend && me.legend.handleEvent) {
me.legend.handleEvent(e);
}
}
// Remove styling for last active (even if it may still be active)

27
src/core/core.legend.js
View File

@ -25,6 +25,8 @@ module.exports = function(Chart) {
ci.update();
},
onHover: null,
labels: {
boxWidth: 40,
padding: 10,
@ -424,10 +426,24 @@ module.exports = function(Chart) {
// Handle an event
handleEvent: function(e) {
var me = this;
var opts = me.options;
var type = e.type === 'mouseup' ? 'click' : e.type;
if (type === 'mousemove') {
if (!opts.onHover) {
return;
}
} else if (type === 'click') {
if (!opts.onClick) {
return;
}
} else {
return;
}
var position = helpers.getRelativePosition(e, me.chart.chart),
x = position.x,
y = position.y,
opts = me.options;
y = position.y;
if (x >= me.left && x <= me.right && y >= me.top && y <= me.bottom) {
// See if we are touching one of the dataset boxes
@ -437,10 +453,13 @@ module.exports = function(Chart) {
if (x >= hitBox.left && x <= hitBox.left + hitBox.width && y >= hitBox.top && y <= hitBox.top + hitBox.height) {
// Touching an element
if (opts.onClick) {
if (type === 'click') {
opts.onClick.call(me, e, me.legendItems[i]);
}
break;
} else if (type === 'mousemove') {
opts.onHover.call(me, e, me.legendItems[i]);
break;
}
}
}
}

1
test/core.legend.tests.js
View File

@ -23,6 +23,7 @@ describe('Legend block tests', function() {
// a callback that will handle
onClick: jasmine.any(Function),
onHover: null,
labels: {
boxWidth: 40,