Chart.js v2: Come far apparire sempre i tooltip nel grafico a torta?

Question

Ho trovato similar questions in Stack Overflow, ma tutti erano indirizzati uno e due anni fa. Ora Chart.js è disponibile nella versione 2 e molte modifiche alla documentazione. Qualcuno può aiutarmi a mostrare un esempio di grafico a torta con etichette o il grafico a torta con tutte le descrizioni dei suoi segmenti sono visibili?

UPDATE

Grazie alla @potatopeelings, la sua risposta funziona perfettamente per Chart.js v2.1.

Anche se inizialmente ho chiesto come visualizzare in modo permanente i suggerimenti sul grafico a torta, ho trovato una soluzione migliore: mostrare i valori come etichette in percentuale! Ora è abilitato per il grafico a torta in Chart.js v2.1. Nelle opzioni del grafico:

animation: { 
    duration: 0, 
    onComplete: function() { 
    var self = this, 
     chartInstance = this.chart, 
     ctx = chartInstance.ctx; 

    ctx.font = '18px Arial'; 
    ctx.textAlign = "center"; 
    ctx.fillStyle = "#ffffff"; 

    Chart.helpers.each(self.data.datasets.forEach(function (dataset, datasetIndex) { 
     var meta = self.getDatasetMeta(datasetIndex), 
      total = 0, //total values to compute fraction 
      labelxy = [], 
      offset = Math.PI/2, //start sector from top 
      radius, 
      centerx, 
      centery, 
      lastend = 0; //prev arc's end line: starting with 0 

     for (var val of dataset.data) { total += val; } 

     Chart.helpers.each(meta.data.forEach(function (element, index) { 
      radius = 0.9 * element._model.outerRadius - element._model.innerRadius; 
      centerx = element._model.x; 
      centery = element._model.y; 
      var thispart = dataset.data[index], 
       arcsector = Math.PI * (2 * thispart/total); 
      if (element.hasValue() && dataset.data[index] > 0) { 
       labelxy.push(lastend + arcsector/2 + Math.PI + offset); 
      } 
      else { 
       labelxy.push(-1); 
      } 
      lastend += arcsector; 
     }), self) 

     var lradius = radius * 3/4; 
     for (var idx in labelxy) { 
      if (labelxy[idx] === -1) continue; 
      var langle = labelxy[idx], 
       dx = centerx + lradius * Math.cos(langle), 
       dy = centery + lradius * Math.sin(langle), 
       val = Math.round(dataset.data[idx]/total * 100); 
      ctx.fillText(val + '%', dx, dy); 
     } 

    }), self); 
    } 
}, 

Answer 1

Soluzione per ChartJs versione> 2.1.5:

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

Answer 2

Con il nuovo Chart.js 2.1 è possibile scrivere un plugin per fare questo e controllarlo tramite una proprietà options

---

Anteprima

---

Script

Si noti che è necessario registrare il plugin prima di inizializzare la tabella di

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

e poi

new Chart(ctx, { 
    type: 'pie', 
    data: data, 
    options: { 
     showAllTooltips: true 
     ... 

Con la versione precedente 2.x, si dovrebbe in grado di spostare il uguale (o simile, non sono sicuro della precedente struttura dati) a options.animation.onComplete

---

Fiddle - http://jsfiddle.net/q15ta78q/

Answer 3

ero alla ricerca di una soluzione simile e sono imbattuto in questo chartjs plug Chart.PieceLabel.js. Ha configurazioni per visualizzare modalità come etichetta, valore e percentuale.