Chart.js - 定位甜甜圈标签

Question

我有一个使用Chart.js的网页.在这个页面中,我正在渲染三个圆环图.在每个图表的中间,我想显示填充的甜甜圈的百分比.目前,我有以下代码,可以在这个小提琴中看到.

function setupChart(chartId, progress) {
  var canvas = document.getElementById(chartId);
  var context = canvas.getContext('2d');

  var remaining = 100 - progress;
  var data = {
    labels: [ 'Progress', '', ],
    datasets: [{
      data: [progress, remaining],
      backgroundColor: [
        '#8FF400',
        '#FFFFFF'
      ],
      borderColor: [
        '#8FF400',
        '#408A00'
      ],
      hoverBackgroundColor: [
        '#8FF400',
        '#FFFFFF'
      ]
    }]
  };

  var options = {
    responsive: true,
    maintainAspectRatio: false,
    scaleShowVerticalLines: false,

    cutoutPercentage: 80,
    legend: {
      display: false
    },
    animation: {
      onComplete: function () {
        var xCenter = (canvas.width / 2) - 20;
        var yCenter = canvas.height / 2 - 40;

        context.textAlign = 'center';
        context.textBaseline = 'middle';

        var progressLabel = data.datasets[0].data[0] + '%';
        context.font = '20px Helvetica';
        context.fillStyle = 'black';
        context.fillText(progressLabel, xCenter, yCenter);
      }
    }
  };

  Chart.defaults.global.tooltips.enabled = false;
  var chart = new Chart(context, {
    type: 'doughnut',
    data: data,
    options: options
  });
}

图表"运行".但问题在于标签的渲染.标签不是在甜甜圈中间垂直和水平居中.标签的位置也会根据屏幕分辨率而变化.您可以通过调整图表在小提琴中呈现的帧的大小来查看标签更改位置.

我的问题是,如何在甜甜圈中间始终如一地定位百分比？我的页面是一个响应式页面,所以具有一致的定位很重要但是,我不知道还能做什么.我觉得这些textAlign和textBaseline属性不起作用,或者我误解了它们的用法.

谢谢!

Answer 1

请参阅此http://jsfiddle.net/uha5tseb/2/

可以通过此参考获取每个图表的宽度/高度来处理

  onComplete: function (event) {
    console.log(this.chart.height);
    var xCenter = this.chart.width/2;
    var yCenter = this.chart.height/2;

    context.textAlign = 'center';
    context.textBaseline = 'middle';

    var progressLabel = data.datasets[0].data[0] + '%';
    context.font = '20px Helvetica';
    context.fillStyle = 'black';
    context.fillText(progressLabel, xCenter, yCenter);
  }

希望这能解决您的问题！