javascript - Insertar porcentaje de rosca charts.js

canvas chart.js

Question

Estoy usando charts.js librarie y me gustaría saber cómo podría agregar una marca al agujero de un gráfico de dona (algo así como un porcentaje) -

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





});

Mi lienzo

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

Answer 1

El método Draw crea el lienzo para el gráfico. Se llama al método de dibujo por desplazamiento para volver a crear el gráfico y mostrar la información sobre herramientas. El texto desaparece porque no hay un código para mostrar el texto dentro del método de dibujo ya que estamos agregando texto manualmente fuera de la API.

Puede lograr esto al extender el gráfico. Sigue los documentos aquí.

A continuación se muestra el ejemplo de agregar registros totales en el centro de la tabla de dona.

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;

Ejemplo: jsfiddle

Answer 2

El gráfico de rosquillas está centrado en el lienzo, por lo que puedes calcular el centro de la rosquilla así:

// get the canvas element and its context
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");

// calculate the center of the canvas (cx,cy)
var cx=canvas.width/2;
var cy=canvas.height/2;

Luego puede indicarle a lienzo que dibuje texto vertical y horizontalmente centrado alrededor de cx, cy de esta manera:

// horizontally align text around the specified point (cx)
ctx.textAlign=''center'';

// vertically align text around the specified point (cy)
ctx.textBaseline=''middle'';

// draw the text
ctx.font=''14px verdana'';
ctx.fillStyle=''black'';
ctx.fillText("Text Here",cx,cy);

Pero debes esperar a que se completen las animaciones antes de dibujar tu texto centrado.

Para hacer eso debes decirle a ChartJS que quieres que se active una función de devolución de llamada cuando complete su animación. Puede establecer la devolución de llamada configurando la propiedad onAnimationComplete de las opciones del gráfico:

var myDoughnutChart = new Chart(ctx).Doughnut(data, {
    responsive : true,

    // when ChartJS has completed all animations then call the addText function
    onAnimationComplete: addText
});

Aquí hay una demostración que lo resume todo:

var doughnutData = [{
    value: 300,
    color: "#F7464A",
    highlight: "#FF5A5E",
    label: "Red"
  }, {
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green"
  }, {
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow"
  }, {
    value: 40,
    color: "#949FB1",
    highlight: "#A8B3C5",
    label: "Grey"
  }, {
    value: 120,
    color: "#4D5360",
    highlight: "#616774",
    label: "Dark Grey"
  }

];

window.onload = function() {
  var canvas = document.getElementById("chart-area");
  var ctx = document.getElementById("chart-area").getContext("2d");
  window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
    responsive: true,
    onAnimationComplete: addText
  });

};

var myDoughnutChart = new Chart(ctx).Doughnut(data);
var myDoughnutChart = new Chart(ctx).Doughnut(doughnutData, {
  responsive: true,
  onAnimationComplete: addText
});


function addText() {

  var canvas = document.getElementById("chart-area");
  var ctx = document.getElementById("chart-area").getContext("2d");

  var cx = canvas.width / 2;
  var cy = canvas.height / 2;

  ctx.textAlign = ''center'';
  ctx.textBaseline = ''middle'';
  ctx.font = ''14px verdana'';
  ctx.fillStyle = ''black'';
  ctx.fillText("Text Here", cx, cy);

}

body {
  padding: 10px;
  margin: 0;
}
#canvas-holder {
  width: 30%;
}
canvas {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<div id="canvas-holder">
  <canvas id="chart-area" width="500" height="500" />
</div>