如何在 react-chartjs-2 中更改甜甜圈的文本大小？

问题描述

如何更改 react-chartjs-2 中甜甜圈的文本大小？

这个中心文字太小了。

import React,{Fragment} from 'react';
import Chart from 'chart.js';
import {Doughnut} from 'react-chartjs-2';

const chartColor1 = "#de272c"
const chartColor2 = "#CED0D2"

// some of this code is a variation on https://jsfiddle.net/cmyker/u6rr5moq/
var originalDoughnutDraw = Chart.controllers.doughnut.prototype.draw;
Chart.helpers.extend(Chart.controllers.doughnut.prototype,{
  draw: function() {
    originalDoughnutDraw.apply(this,arguments);
    
    var chart = this.chart.chart;
    var ctx = chart.ctx;
    var width = chart.width;
    var height = chart.height;

    var fontSize = (height / 100).toFixed(2);
    ctx.font = fontSize + "px";
    ctx.fillStyle = chartColor1;
    ctx.textBaseline = "middle";

    var text = chart.config.data.text,textx = Math.round((width - ctx.measureText(text).width) / 2),textY = height / 2;

    ctx.fillText(text,textx,textY);
    ctx.save();
  }
});

const DoughnutChart = (props) => {

  return (
    <Fragment>
      { props.aggregatedrating || props.rating
      ? 
      <div>
        <Doughnut
          data={{
            labels: [],datasets: [{
              data: [props.aggregatedrating,100 - props.aggregatedrating],backgroundColor: [chartColor1,chartColor2],borderColor: [chartColor1],borderWidth: 0,weight: 1
              // hoverBackgroundColor: THEME_COLOR
            }],text: "24"
          }}
          options={{
            responsive: true,cutoutPercentage: 75,title:{
              display:false,// text:'rating',// fontSize:200
            },legend:{
              display:false,// position:'right'
            },}}
          
        />
        </div>
      : <h4>No rating</h4>
      }

    </Fragment>
  );
};

export default DoughnutChart;

解决方法

根据小提琴，您以像素为单位设置文本字体大小， 为什么不尝试更改为 em 而不是 px

...
var fontSize = (height / 100).toFixed(2);
ctx.font = fontSize + "em"; //<-------- here 
...