更改react-chartjs-3中的标签位置

问题描述

我无法在react-chart-js3中将标签的位置更改为底部。现在显示在图表的顶部。

        let damage = 0;
        let width = 100;
        let minWidth = 0;
        let text = '';
        let hp = document.getElementById('hp');
        let hpText = document.getElementById('hpText');
        let currentHp = 3000;
        let maxHp = 3000;
        hpText.innerText = currentHp + '/' + maxHp;
        
        let setUp = () => {
            
            damage = parseInt(document.getElementById('text').value);
            text = document.getElementById('text').value;
            
            if(text.length > 0){
                currentHp -= damage;
            }
            
            if(currentHp <= 0) {
                currentHp = 0;
            }
            
            minWidth = (currentHp / maxHp) * 100;
            
            let interval = setInterval(() => {
                
                if(!(width <= minWidth)) {
                    if(width <= 0) {
                        currentHp = 0;
                        hpText.innerText = currentHp + '/' + maxHp;
                        clearInterval(interval);
                        alert('ha')
                        return;
                    }
                    
                    width--;
                    
                    hp.style.width = width + '%';
                    hpText.innerText = currentHp + '/' + maxHp;
                    
                    if(width <= minWidth) {
                        alert(minWidth + " " + width)
                        clearInterval(interval);
                        return;
                    }
                }
                
            },15);
            
        }

解决方法

将options道具传递到Doughnut组件。

import React from "react";
import { Doughnut } from "react-chartjs-3";

export default function UserDashboard() {
  const DoughData = {
    labels: ["Red","Green","Yellow"],datasets: [
      {
        data: [300,50,100],backgroundColor: ["#FF6384","#36A2EB","#FFCE56"],hoverBackgroundColor: ["#FF6384","#FFCE56"]
      }
    ]
  };

  const options = {
    legend: {
      display: true,position: "bottom"
    }
  };

  return (
    <div>
      <Doughnut data={DoughData} options={options} />
    </div>
  );
}

工作代码-https://codesandbox.io/s/wandering-snowflake-b7tgd?file=/src/tickets.js