L'insertion de pourcentage charts.js beignet

je suis, à l'aide de charts.js librarie et voudrais savoir comment pourrais-je ajouter une marque pour le trou d'un graphique en anneau (qqch comme un pourcentage)-

L'insertion de pourcentage charts.js beignet

Mon js

 jQuery(document).ready(function(){

var data = [
            {
                value: 5,
                color:"#A1638C",
                highlight: "#BF7AAF",
                label: "Días Completados 1/21"
            },
            {
                value: 95,
                color: "#07659A",
                highlight: "#4190BA",
                label: "Días pendientes 20/21"
            },

        ]


 var ctx = jQuery("#myChart").get(0).getContext("2d");
 var myDoughnutChart = new Chart(ctx).Doughnut(data);





});

Ma toile:

<canvas id="myChart" width="264px"></canvas>

OriginalL'auteur Buendiadas | 2015-02-13

  1. 1

    La méthode de tirage crée la toile pour le graphique. Sur le vol stationnaire à la méthode de tirage est appelé à re-créer le tableau et afficher l'info-bulle. Le texte disparaît car il n'y a pas de code pour afficher le texte à l'intérieur de la méthode de tirage que nous sommes en ajoutant du texte manuellement à l'extérieur de l'API.

    Vous pouvez atteindre cet objectif en étendant le graphique. Suivez Docs ici.

    Voici l'exemple de l'ajout d'enregistrements au centre de la
    graphique en anneau.

    Chart.defaults.derivedDoughnut = Chart.defaults.doughnut;
var customDoughnut = Chart.controllers.doughnut.extend({
  draw: function(ease) {
    Chart.controllers.doughnut.prototype.draw.apply(this, [ease]);
    var width = this.chart.chart.width,
      height = this.chart.chart.height;
    var total = this.getMeta().total;
    var fontSize = (height / 114).toFixed(2);
    var ctx = this.chart.chart.ctx;
    ctx.font = fontSize + "em Verdana";
    ctx.textBaseline = "middle";
    var text = total,
      textX = Math.round((width - ctx.measureText(text).width) / 2),
      textY = height / 2;

    ctx.fillText(text, textX, textY);
  }
});
Chart.controllers.derivedDoughnut = customDoughnut;

    Exemple: jsfiddle

    Merci, excellente solution !

    OriginalL'auteur Debasis Panda