multiple - Highcharts: mostrar información sobre herramientas en puntos, haga clic en lugar de mouseover

highcharts test data

Question

¿Es posible tener la información sobre herramientas al hacer clic en los puntos en lugar de mover el mouse?

He intentado mostrar los valores en la alerta de script java como a continuación

plotOptions: {
series: {
cursor: ''pointer'',
point: {
events: {
click: function() {
alert (''Category: ''+ this.category +'', value: ''+ this.y);
}
}
}
}
}

El requisito es mostrar una sugerencia de herramienta de gráfico alta al hacer clic.

Por favor ayuda. ¡Gracias!

Answer 1

Solo agregue para aquellos que tienen los mismos problemas que yo (vea el comentario de @kevinandrada justo después de la respuesta correcta, no puedo comentar): si llama a tooltip.refresh cuando su tooltip.shared = true obtendrá una excepción Uncaught TypeError: Cannot read property ''category'' of undefined .

Debe proporcionar una matriz de puntos como primer argumento:

plotOptions: {
series: {
stickyTracking: false,
events: {
click: function(evt) {
var points = this.chart.series.map(function(d) {
return d.searchPoint(evt, true)
});
this.chart.myTooltip.refresh(points, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
}
},

Answer 2

Aquí está la solución para " No se puede leer la categoría de indefinido ". Simplemente tomo los puntos de la tabla y los paso para refrescarlos.

point: {
events: {
mouseOver: function(evt) {
var hoveredPoints = a.hoverPoints;
a.tooltip.refresh(hoveredPoints);
},
mouseOut: function() {
a.tooltip.hide();
}
}
}

Ejemplo de violín aquí: http://jsfiddle.net/2swEQ/153/

Answer 3

Agregando para aquellos que tienen problemas como yo con useHTML: true y quiere mostrar información sobre herramientas solo al hacer clic y no al desplazarse.

tooltip: {
useHTML: true
}

Aquí hay un violín .

Answer 4

Como afirma @PawelFus, oficialmente no es compatible, pero puedes ignorar esto tomando el control de la visibilidad de la información sobre herramientas.

Primero en la carga del gráfico, escóndelo:

 chart: {
events: {
load: function(){
$(''.highcharts-tooltip'').hide();
}
}
},

Deshabilite el seguimiento adhesivo, y en mouseout hide it, al hacer clic, muéstrelo:

 plotOptions: {
series: {
stickyTracking: false,
events: {
click: function() {
$(''.highcharts-tooltip'').show();
},
mouseOut: function() {
$(''.highcharts-tooltip'').hide();
}
}
}
},

Aquí hay un ejemplo de violín.

El primer intento solo funcionó en Chrome, aquí hay otro:

Deshabilitar la información sobre herramientas predeterminada:

tooltip: {
enabled: false
},

En el evento de carga de gráficos, crea el tuyo propio:

 chart: {
events: {
load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
}
},

En el clic y el mouseout, controlelo:

plotOptions: {
series: {
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
}
},

Probé esto en IE y Chrome, ya no instalaré Firefox.

Actualice el código 9/7/2017 con un nuevo fragmento de pila:

$(function () {
$(''#container'').highcharts({
xAxis: {
categories: [''Jan'', ''Feb'', ''Mar'', ''Apr'', ''May'', ''Jun'',
''Jul'', ''Aug'', ''Sep'', ''Oct'', ''Nov'', ''Dec'']
},
tooltip: {
valueSuffix: ''°C'',
enabled: false
},
chart: {
events: {
load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
}
},
plotOptions: {
series: {
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.options.enabled = true;
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
this.chart.myTooltip.options.enabled = false;
}
}
}
},
series: [{
name: ''Tokyo'',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>