如何更改 react-chartjs-2 中标签的显示和样式

Question

我正在使用 react-chartjs-2，我希望标签是圆形的。我还希望带有标签的图表本身具有内联块显示，以便我得到类似这张照片的内容： [

但我实际得到的是：

我的代码在这里：

  let _data = data;
                let _backgroundColor = [];
                let _borderColor = [];
                setDataShareholder(res);
                res.value.forEach(item => {
                    let rgb = `${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)}`;
                    _backgroundColor.push(`rgba(${rgb}, 0.5)`)
                    _borderColor.push(`rgba(${rgb}, 1)`)
                });
                _data.labels = res.value.map(item => item.name)
                _data.datasets = [{
                    data: res.value.map(item => Number(item.violationsCount)),
                    backgroundColor: _backgroundColor,
                    borderColor: _borderColor,
                    borderWidth: 1
                }];
                setData(_data);

用法：

  import { Doughnut } from 'react-chartjs-2';

  <Doughnut data={data} />

如果可以，请帮助我。谢谢

Answer 1

您可以配置图表选项。您可以将图例位置设置为右侧，并将 pointStyle 设置为圆形：

const options = {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    plugins: {
      legend: {
        position: 'right',
        labels: {
          usePointStyle: true,
          pointStyle: 'circle'
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>

Answer 2

所以在@LeeLenalee 的帮助下，我终于将我的代码更改为这个并且它运行完美。

const options = {
        plugins: {
          legend: {
            position: 'right',
            rtl : true,
            labels: {
              usePointStyle: true,
              pointStyle: 'circle',
              padding: 20,
            }
          }
        },
    }
    <Doughnut data={data} options={options}/>

如您所见，我刚刚添加了一个名为 options 的新常量并进行了上述更改

如何更改 react-chartjs-2 中标签的显示和样式

how to change display and styles of the labels in react-chartjs-2

reactjs

chart.js

react-chartjs-2