Estoy tratando de aumentar el radio de detección de desplazamiento para los puntos de dispersión en HighCharts, pero no he encontrado una forma oficial de hacerlo.
Esencialmente, quiero que cada punto tenga un radio invisible que active el efecto de desplazamiento cuando el mouse ingrese.
Sé que stickyTracking
existe, pero en mi caso se siente demasiado pegajoso.
Sin embargo, apagarlo significa tener que ser extremadamente preciso antes de que aparezca la información sobre herramientas.
StickyTracking desactivado: https://jsfiddle.net/wsxkLn25
StickyTracking en: https://jsfiddle.net/wsxkLn25/1/
¿Hay alguna manera de activar el efecto de desplazamiento en un punto antes de que el mouse ingrese al radio real del punto sin stickyTracking
?
No existe tal función en Highcharts, pero puede implementarla habilitando el seguimiento fijo y procesando el método interno getHoverData
solo si un punto flotante está lo suficientemente cerca del cursor del mouse. Ejemplo:
(function(H) { H.wrap(H.Pointer.prototype, 'getHoverData', function(proceed, existingHoverPoint, existingHoverSeries, series, isDirectTouch, shared, e) { var hoverData = proceed.apply(this, Array.prototype.slice.call(arguments, 1)); var RADIUS = 20; var point = hoverData.hoverPoint; var chart = this.chart; var plotX; var plotY; if (point) { plotX = point.plotX + chart.plotLeft; plotY = point.plotY + chart.plotTop; if ( plotX + RADIUS > e.chartX && plotX - RADIUS < e.chartX && plotY + RADIUS > e.chartY && plotY - RADIUS < e.chartY ) { return hoverData; } else if (chart.hoverPoint) { chart.hoverPoint.setState(''); chart.tooltip.hide(); } } return { hoverPoint: null, hoverPoints: [], hoverSeries: null }; }); }(Highcharts));
Demostración en vivo: https://jsfiddle.net/BlackLabel/sb35j0ov/
Documentos: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts