web-dev-qa-db-fra.com

Désactiver le survol sur HighCharts

J'ai créé un graphique à secteurs à l'aide de la bibliothèque HighCharts. Voici mon graphique:

 // http://jsfiddle.net/t2MxW/20890/

    var chart = new Highcharts.Chart({
        colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        credits: { enabled: false },
        chart: {
               renderTo: 'container',
               backgroundColor: 'rgba(255, 255, 255, 0.1)',
               type: 'pie',
               margin: [0, 0, 0, 0],
               spacingTop: 0,
               spacingBottom: 0,
               spacingLeft: 0,
               spacingRight: 0
        },
        title: { text: null },
        plotOptions: {
               pie: {
                   allowPointSelect: false,
                   size: '100%',
                    dataLabels: { enabled: false }
               }
       },
       series: [{
               showInLegend: false,
               type: 'pie',
               name: 'Pie Chart',
               data: [
                     ['Mobile', 65], // first half of pie
                     ['Other', 35] // second half of pie
               ]
       }]
    });

Mais le problème est que je ne veux pas que des info-bulles apparaissent au passage de la souris ... 

Est-il possible de désactiver l'info-bulle en survol?

javascriptjqueryhighcharts
25
Vytalyi

Vous devez définir l'attribut tooltip sur false, comme suit:

tooltip: { enabled: false },

jsFiddle ici

Voici le code complet pour votre cas:

var chart = new Highcharts.Chart({
       colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
       credits: { enabled: false },
       tooltip: { enabled: false },
       chart: {
              renderTo: 'container',
              backgroundColor: 'rgba(255, 255, 255, 0.1)',
              type: 'pie',
              margin: [0, 0, 0, 0],
              spacingTop: 0,
              spacingBottom: 0,
              spacingLeft: 0,
              spacingRight: 0
       },
       title: { text: null },
       plotOptions: {
              pie: {
                  allowPointSelect: false,
                  size: '100%',
                   dataLabels: { enabled: false }
              }
      },
      series: [{
              showInLegend: false,
              type: 'pie',
              name: 'Pie Chart',
              data: [
                    ['Mobile', 65], // first half of pie
                    ['Other', 35] // second half of pie
              ]
      }]
});
48
lifetimes

La désactivation de l'infobulle désactive l'info-bulle mais l'effet de survol est toujours présent. Pour désactiver l'effet de survol, ajoutez ce qui suit à votre plotOptions:

    plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: false
                }
            }
        }
    },
56
SergeyB

Vous pouvez également désactiver le suivi de la souris en général, les info-bulles et les effets de survol: 

(copier/coller le lien) http://api.highcharts.com/highcharts#series .enableMouseTracking

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-enablemousetracking-false/

plotOptions: {
    series: {
        enableMouseTracking: false
    }
}
7
ninedozen

Vous pouvez simplement les désactiver en utilisant ce qui suit:

tooltip: {
    enabled: false       
},
5
SteveP

vous pouvez simplement le désactiver en activant l'option

tooltip:{
   enabled: false
}
2
Strikers

Comme spécifié dans la réponse acceptée, vous devez définir

 tooltip: { enabled: false }

Remarque - vous devez spécifier ceci comme propriété de votre objet Highcharts.Options (c'est-à-dire votre objet d'options de graphique, non une propriété de votre série). Donc, spécifiez-le dans le JSON que vous transmettez à votre objet Highcharts.Chart ou spécifiez-le comme propriété d'un objet Highcharts.Options que vous avez créé explicitement avant de le transmettre à Highcharts.Chart.

Voir https://api.highcharts.com/highcharts/tooltip.enabled

0
Chris Halcrow

Habituellement, je ne fais que désactiver le style dans CSS pour pouvoir toujours accéder à l'événement de survol dans JS si nécessaire.

.highcharts-tooltip {
    display: none;
}
0
Ben Hall