Highcharts - Afficher les info-bulle sur les points sur la place du passage de la souris

Est-il possible d'avoir un outil de pointe en cliquant sur des points à la place de déplacement de la souris.

J'ai essayé avec de l'affichage des valeurs en java script d'alerte ci-dessous

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

Exigence est de montrer le haut de tableau pointe de l'outil sur cliquez sur.

S'il vous plaît aider. Merci!

Pourquoi ne pas accepter toutes les réponses à vos questions? Même quand vous avez dit qu'il a travaillé, vous n'avez toujours pas de cliquer sur accepter signe sur le côté gauche de la réponse. Lire ceci. Et à propos de votre question - il n'est pas soutenu par officiel Highcharts API. Cependant, je voudrais essayer d'utiliser chart.tooltip.refresh(point).
Vérifier ICI
Merci, de travail..

InformationsquelleAutor Ashwin Patil | 2014-06-13

highcharts highstock

Comme @PawelFus unis, il n'est pas officiellement pris en charge, mais vous pouvez fudge ce en en prenant le contrôle de la visiblity de l'info-bulle.

~~d'Abord sur le graphique de la charge, de le cacher:~~

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

Désactiver collant de suivi, et sur mouseout de la masquer, cliquez sur montrer:

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

~~Voici un violon exemple.~~

Première tentative n'a travaillé que dans google chrome, voici une autre:

Désactiver par défaut info-bulle:

tooltip: {
    enabled: false
},

Dans le graphique de la charge de l'événement, créer votre propre:

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

Dans le clic et mouseout contrôler:

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

J'ai testé sous IE et Chrome, je ne vais pas installer Firefox plus.

Mise à jour de code 9/7/2017 avec la nouvelle pile extrait de:

JS:

$(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]
            }]
        });
    });

HTML:

<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>

jsfiddle.net/2swEQ - info-bulle n'est pas de travail dans mozilla 30.0 et IE 11.
Fonctionne dans chrome, mais ne fonctionne pas sous Mozilla 30.
les gens continuent d'utiliser les navigateurs autres que le chrome 🙂 Voir la mise à jour de réponse...
Cela ne semble pas fonctionner lorsque vous avez de l'info-bulle shared: true, c'est jeter: Uncaught TypeError: Cannot read property 'category' of undefined
c'est parce que premier paramètre de myTooltip.actualiser devrait être un tableau. Type ce.le graphique.myTooltip.refresh([evt.point], evt) et l'erreur a disparu. Cette affiche uniquement le point cliqué même si, comme il va être le seul dans le tableau fourni à la fonction - vous avez besoin pour obtenir tous les points manuellement.
salut @Mark. L'exemple (jsfiddle) ne fonctionne plus. Savez-vous comment faire pour re-régler?
voir nouvelles de travail exemple de code ci-dessus (qui ressemble à une Highcharts changé des choses en interne).

InformationsquelleAutor Mark

2

Ajout pour ceux qui ont des problèmes comme moi avec useHTML: true et souhaite afficher les info-bulle seulement sur cliquez et pas sur le vol stationnaire.
```
tooltip: {
  useHTML: true
}
```
Ici est un violon.
- Cette solution fonctionne pour moi mais pour une raison quelconque, la première fois que vous passez la souris sur n'importe quel point de l'info-bulle est de montrer (sans cliquer).
InformationsquelleAutor Alexandra Espichán

Juste ajouter pour ceux qui a les mêmes problèmes que moi (voir le commentaire de @kevinandrada juste après la réponse correcte, je ne peux pas commenter): si vous appelez tooltip.refresh lorsque votre tooltip.shared = true vous aurez une exception Uncaught TypeError: Cannot read property 'category' of undefined.

Vous devez fournir un tableau de points comme premier argument:

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();
            }                       
        }           
    }
 },

InformationsquelleAutor Kislenok Roman

-1

Voici le correctif de "Ne peut pas lire de la catégorie de undefined". Je viens de prendre planait points de graphique et de les transmettre à actualiser.

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

Échantillon de violon ici: http://jsfiddle.net/2swEQ/153/

InformationsquelleAutor MShulzhenko

Vous devez vous connecter pour publier un commentaire.