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?
Vous devez définir l'attribut tooltip
sur false
, comme suit:
tooltip: { enabled: false },
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
]
}]
});
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
}
}
}
},
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
plotOptions: {
series: {
enableMouseTracking: false
}
}
Vous pouvez simplement les désactiver en utilisant ce qui suit:
tooltip: {
enabled: false
},
vous pouvez simplement le désactiver en activant l'option
tooltip:{
enabled: false
}
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
.
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;
}