Chart.js – Donut affiche toujours les info-bulles?

J’ai eu le même problème aujourd’hui et l’ai résolu assez facilement en ajoutant les options onAnimationComplte et tooltipevents.

onAnitmationComplete appelle la méthode pour afficher les info-bulles comme un survol. Normalement, vous définissez les événements dans tooltipevents pour afficher les info-bulles, mais nous devons les supprimer et passer un tableau vide.

Note 🙁 http://www.chartjs.org/docs/#doughnut-pie-chart ).

Javascript:

var options = { tooltipTemplate: "<%= value %>", onAnimationComplete: function() { this.showTooltip(this.segments, true); //Show tooltips in bar chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/) //this.showTooltip(this.datasets[0].bars, true); //Show tooltips in line chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/) //this.showTooltip(this.datasets[0].points, true); }, tooltipEvents: [], showTooltips: true } var context = $('#chart').get(0).getContext('2d'); var chart = new Chart(context).Pie(data, options); 

HTML:

Exemple de données:

 var data = [ { value: 300, color:"#F7464A", highlight: "#FF5A5E" }, { value: 50, color: "#46BFBD", highlight: "#5AD3D1" }, { value: 100, color: "#FDB45C", highlight: "#FFC870" } ] 

JSFiddle PIE: http://jsfiddle.net/5gyfykka/

JSFiddle BAR / LINE: http://jsfiddle.net/5gyfykka/14/

J’ai développé la méthode de Kapi afin que lorsque vous la survoliez, vous gardiez toujours la fonctionnalité par défaut telle que le changement de couleur, et lorsque vous survoliez une section, elle masquait le rest. Je pense que ça a l’air mieux.

 var options = { onAnimationComplete: function () { this.showTooltip(this.segments, true); }, } var ctx = document.getElementById("Chart").getContext("2d"); var myPieChart = new Chart(ctx).Pie(data, options); $("#Chart").on('mouseleave', function (){ myPieChart.showTooltip(myPieChart.segments, true); }); 

Vous pouvez le faire en écrivant votre propre plugin qui supporte la version de ChartJS> 2.1.5.

Incluez le code suivant dans votre script:

 // Show tooltips always even the stats are zero Chart.pluginService.register({ beforeRender: function(chart) { if (chart.config.options.showAllTooltips) { // create an array of tooltips // we can't use the chart tooltip because there is only one tooltip per chart chart.pluginTooltips = []; chart.config.data.datasets.forEach(function(dataset, i) { chart.getDatasetMeta(i).data.forEach(function(sector, j) { chart.pluginTooltips.push(new Chart.Tooltip({ _chart: chart.chart, _chartInstance: chart, _data: chart.data, _options: chart.options.tooltips, _active: [sector] }, chart)); }); }); // turn off normal tooltips chart.options.tooltips.enabled = false; } }, afterDraw: function(chart, easing) { if (chart.config.options.showAllTooltips) { // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once if (!chart.allTooltipsOnce) { if (easing !== 1) return; chart.allTooltipsOnce = true; } // turn on tooltips chart.options.tooltips.enabled = true; Chart.helpers.each(chart.pluginTooltips, function(tooltip) { tooltip.initialize(); tooltip.update(); // we don't actually need this since we are not animating tooltips tooltip.pivot(); tooltip.transition(easing).draw(); }); chart.options.tooltips.enabled = false; } } }); // Show tooltips always even the stats are zero 

Ensuite, utilisez la ligne suivante dans les options de tout graphique sur lequel vous souhaitez afficher toutes les info-bulles disponibles.

 showAllTooltips: true 

Working Fiddle est donné ci-dessous

 // Show tooltips always even the stats are zero Chart.pluginService.register({ beforeRender: function(chart) { if (chart.config.options.showAllTooltips) { // create an array of tooltips // we can't use the chart tooltip because there is only one tooltip per chart chart.pluginTooltips = []; chart.config.data.datasets.forEach(function(dataset, i) { chart.getDatasetMeta(i).data.forEach(function(sector, j) { chart.pluginTooltips.push(new Chart.Tooltip({ _chart: chart.chart, _chartInstance: chart, _data: chart.data, _options: chart.options.tooltips, _active: [sector] }, chart)); }); }); // turn off normal tooltips chart.options.tooltips.enabled = false; } }, afterDraw: function(chart, easing) { if (chart.config.options.showAllTooltips) { // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once if (!chart.allTooltipsOnce) { if (easing !== 1) return; chart.allTooltipsOnce = true; } // turn on tooltips chart.options.tooltips.enabled = true; Chart.helpers.each(chart.pluginTooltips, function(tooltip) { tooltip.initialize(); tooltip.update(); // we don't actually need this since we are not animating tooltips tooltip.pivot(); tooltip.transition(easing).draw(); }); chart.options.tooltips.enabled = false; } } }); // Show tooltips always even the stats are zero var canvas = $('#myCanvas2').get(0).getContext('2d'); var doughnutChart = new Chart(canvas, { type: 'doughnut', data: { labels: [ "Success", "Failure" ], datasets: [{ data: [45, 9], backgroundColor: [ "#1ABC9C", "#566573" ], hoverBackgroundColor: [ "#148F77", "#273746" ] }] }, options: { // In options, just use the following line to show all the tooltips showAllTooltips: true } }); 

Dans le cas où quelqu’un essaie de cacher certaines info-bulles de segment; faites-le dans le tooltipTemplate:

 tooltipTemplate : "<% var percentage = Math.round(circumference / 6.283 * 100); if (percentage >8)%><%= percentage %>%"; 

Par exemple, ce code vérifie la valeur% et affiche uniquement les valeurs supérieures à 8% pour réduire l’encombrement.

Si vous souhaitez afficher UNE info-bulle, vous devez utiliser ce code. Voici un exemple pour le premier segment.

 chart.showTooltip([chart.segments[0]], true); 

La fonction showTooltip accepte uniquement les tableaux à 2 dimensions pour le premier paramètre.