插入百分比 charts.js 甜甜圈

Question

我正在使用 charts.js 图书馆，我想知道如何在圆环图的孔中添加一些标记（比如百分比）-

我的 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);





});

我的canvas:

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

Answer 1

甜甜圈图以 canvas 为中心，因此您可以这样计算甜甜圈的中心：

// 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;

然后你可以告诉 canvas 以 cx,cy 为中心垂直和水平绘制文本，如下所示：

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

但是在绘制居中文本之前必须等待所有动画完成。

为此，您必须告诉 ChartJS 您希望在它完成动画时触发回调函数。您可以通过设置图表选项的 onAnimationComplete 属性来设置回调：

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

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

这是一个将所有内容放在一起的演示：

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>

Answer 2

Draw 方法为图表创建 canvas。在悬停时调用绘制方法以重新创建图表并显示工具提示。文本消失是因为在 draw 方法中没有显示文本的代码，因为我们在 API 之外手动添加文本。

您可以通过扩展图表来实现这一点。在此处关注 Docs。

Following is the example of adding total records at the centre of the doughnut chart.

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;

示例：jsfiddle

Answer 3

纯css解决方案

.overview-total {
  position: relative;

  .overview-num{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

Html

<div class="overview-total">
   <span class="overview-num">140</span>
   <canvas baseChart class="chart-size" width="300" height="180"
                      [plugins]="doughnutChartPluginsSo"
                      [colors]="doughnutChartColorsSo"
                      [data]="doughnutChartDataSo"
                      [labels]="doughnutChartLabelsSo"
                      [chartType]="doughnutChartTypeSo"
                      [options]="doughnutChartOptionsSo"></canvas>
</div>

Answer 4

我认为接受的答案不起作用，至少对我而言。这是我的解决方案：

let canvas = document.getElementById('chart-area');
let ctx = canvas.getContext('2d');
let perc = 25;

const config = {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [
                perc,
                100-perc
            ],
            backgroundColor: [
                window.chartColors.green,
                window.chartColors.gray
            ]
        }]
    },
    options: {
        responsive: true,
        animation: {
            animateScale: true,
            animateRotate: true,
            onComplete : function() {
                var cx = canvas.width / 2;
                var cy = canvas.height / 2;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.font = '16px verdana';
                ctx.fillStyle = 'black';
                ctx.fillText(perc+"%", cx, cy);
            }
        },
    }
};

new Chart(ctx, config);

插入百分比 charts.js 甜甜圈

Inserting percentage charts.js doughnut

javascript

canvas

charts

chart.js