如何在 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;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）