环形图中的 React-Chartjs 2 标签答案

【问题标题】：React-Chart-JS2 labels inside Doughnut chart环形图中的 React-Chartjs 2 标签
【发布时间】：2020-11-25 07:50:47
【问题描述】：

我需要用 React-Chart-js2 制作甜甜圈图。图表应如下所示

问题：

我在图表中添加了数据（12%、10% 等）。但是如何添加标签（1 星、2 星）？
如何将文本（1234 Total Feedback）放在图表的中心？
是否可以突出显示图片中提到的悬停部分？

代码： const donutChart = {

labels:['1 star','2 star','3 star','4 star'],
datasets: [{
  data: [10, 50, 10,40],
  backgroundColor: [
    '#808080',
    '#808080',
    '#808080',
    '#808080'

    ],
    hoverBackgroundColor: [
    '#FF5733',
    '#FF5733',
    '#FF5733',
    '#FF5733'
    ],
   
    hoverBorderColor : [
      '#FF5733',
      '#FF5733',
      '#FF5733',
      '#FF5733'
      ],
}
]

}

function Reports() {
 
        return (
<div>
          <Doughnut 
          data={donutChart}
          options={{
              padding:"0px",
              responsive:true,
              maintainAspectRatio:true,
              defaultFontSize:"14px",
              title:{
                display:true,
                text:'Total Feedback',
                fontSize:30,
              },
              legend:{
                  display:false,
              },
              plugins:{
                  datalabels: {
                      color:'red',
                      anchor: "start",
                      align:"end",
       
                  }
              } 
          }}
          />
          </div>
)
}

【问题讨论】：

这会对你有所帮助 - stackoverflow.com/questions/20966817/…

标签： reactjs react-chartjs-2

【解决方案1】：

你可以通过注册函数来使用插件

     <Doughnut
        data={data}
        options={options}
        plugins={[
          {
            beforeDraw: function (chart) {
              drawInnerText(chart);
            },
          },
        ]}
      />

你的函数看起来像：

const drawInnerText = (chart) => {
    let ctx = chart.ctx;
    ctx.restore();
    const fontSize = (chart.height / 114).toFixed(2);
    ctx.font = fontSize + 'em sans-serif';
    ctx.textBaseline = 'middle';
    const dataArrValues = chart.config._config.data.datasets[0].data;
    let text =
      chart.tooltip._active.length > 0
        ? `${Math.round(
            (dataArrValues[chart.tooltip._active[0].datasetIndex] /
              dataArrValues.reduce((a, b) => a + b)) *
              100
          )}%`
        : `${Math.round(
            (dataArrValues[0] / dataArrValues.reduce((a, b) => a + b)) * 100
          )}%`;
    let textX = Math.round((chart.width - ctx.measureText(text).width) / 2);
    let textY = chart.height / 2 + chart.legend.height / 2;
    ctx.fillText(text, textX, textY);
    ctx.fillStyle = '#fff';
    ctx.save();
  };

【讨论】：