ChartJS 嗨，我需要得到的文本在面团坚果像图像中心[复制]

wdebmtf2 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(128)

此问题在此处已有答案：

How to add text inside the doughnut chart using Chart.js?（共16个答案）
27天前关闭。
我需要得到的标签在甜甜圈的中心，如第二个图像所示。我尝试了一些方法，但它似乎不工作。我也附上了我目前的代码。谢谢你的帮助我。

export class DoughnutChartDemo extends Component {

    constructor(props) {
        super(props);

        this.chartData = {
            labels: ['A', 'B', 'C'],
            datasets: [
                {
                    data: [300, 50, 100],
                    backgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ],
                    hoverBackgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ]
                }]
        };

        this.lightOptions = {
            plugins: {
                legend: {
                    labels: {
                        color: '#495057'
                    }
                }
            }
        };
    }

    render() {
        return (
            <div className="card flex justify-content-center">
                <Chart type="doughnut" data={this.chartData} options={this.lightOptions} style={{ position: 'relative', width: '40%' }} />
            </div>
        )
    }
}

至

chart.js

来源：https://stackoverflow.com/questions/74012404/hi-i-need-to-get-text-in-center-of-dough-nut-like-the-image

1条答案

按热度按时间

rqdpfwrv1#

我已经创造了。2请试试这个。3我希望这个能帮助你们。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Doughnut } from "react-chartjs-2";
import "./styles.css";

function App() {
  const options = {
    cutoutPercentage: 60,
    tooltips: {
      callbacks: {
        label: (tooltipItem, data) => {
          // Get the dataset label, global label or fall back to empty label
          let label =
            (data.datasets[tooltipItem.datasetIndex].labels &&
              data.datasets[tooltipItem.datasetIndex].labels[
                tooltipItem.index
              ]) ||
            data.labels[tooltipItem.index] ||
            "";
          setChartText({
            label: label,
            value:
              data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]
          });
          return false;
        }
      }
    }
  };

  const data = {
    datasets: [
      {
        data: [6.5, 55, 180],
        backgroundColor: ["#5b7232", "#97012e", "#faab18"],
        labels: ["SCORE", "SCORE B", "SCORE C"],
        pointStyle: "circle"
      }
    ]
  };

  const [chartText, setChartText] = useState({
    label: data.datasets[0].labels[0],
    value: data.datasets[0].data[0]
  });
  return (
    <div className="App">
      <div className="chartContainer">
        <Doughnut data={data} options={options} height={400} width={400} />
        <div className="chartInner">
          <div className="chartValue">{chartText.value}</div>
          <div className="chartLable">{chartText.label}</div>
        </div>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

此预览：https://zw3zw7.csb.app/和这是我的代码和框：https://codesandbox.io/s/react-chart-js-doughnut-center-label-zw3zw7?file=/src/index.js:0-1646

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS 嗨，我需要得到的文本在面团坚果像图像中心[复制]

1条答案

相关问题

热门标签

最新问答