React-Chart.js：如何增加图例和图表之间的 space？

Question

有几个问题运行与我的思路相同。但是，这些问题只关注 chart.js。我有一个类似的问题，但在 react-chart.js 上。 如何增加图例和图表之间的 space？ 我使用了 padding，但它只会增加图例之间的 space。不是我想要的。下面是我的圆环图组件。

 <div className="dougnut-chart-container">
                <Doughnut
                    className="doughnut-chart" 
                    data={
                        {
                            labels: ["a", "b", "c", "d", "e", "f"],
                            datasets: [
                                {
                                    label: "Title",
                                    data: [12821, 34581, 21587, 38452, 34831, 48312],
                                    backgroundColor: [
                                        'rgb(61, 85, 69)',
                                        'rgb(115, 71, 71)',
                                        'rgb(166, 178, 174)',
                                        'rgb(209, 191, 169)',
                                        'rgb(66, 63, 62)',
                                        'rgb(43, 43, 43)',
    
                                    ]
                                }
                            ],
                        }
                    }
                    options={
                        {
                            plugins: {
                                legend: {
                                    labels: {
                                        color: "white",
                                        font: {
                                            size: 12
                                        },
                                        padding: 10,
                                    },
                                    position: "left",
                                    title: {
                                        display: true,
                                        text: "Title",
                                        color: "grey",
                                        padding: 10
                                    }
                                }
                            },
                            elements: {
                                arc: {
                                    borderWidth: 0
                                }
                            },
                            responsive: true,
                            maintainAspectRatio: true,
                            
                        }
                    }
                />
               
            </div>

我的图表是什么样的：

Answer 1

您可以编写自定义插件，如此所示，但您需要为图例框的宽度添加一些额外的间距，而不是向高度添加一些额外的 space :

var 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: 'left'
      },
      legendDistance: {
        padding: 50
      }
    }
  },
  plugins: [{
    id: 'legendDistance',
    beforeInit(chart, args, opts) {
      // Get reference to the original fit function
      const originalFit = chart.legend.fit;

      // Override the fit function
      chart.legend.fit = function fit() {
        // Call original function and bind scope in order to use `this` correctly inside it
        originalFit.bind(chart.legend)();
        // Change the height as suggested in another answers
        this.width += opts.padding || 0;
      }
    }
  }]
}

var 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.5.0/chart.js"></script>
</body>

Answer 2

@LeeLenalee 建议的对我有用。但是对于那些感到困惑并希望将其集成到他们的组件中的人来说，这是我所做的：

<div className="dougnut-chart-container">
                <Doughnut
                    className="doughnut-chart" 
                    data={
                        {
                            labels: ["label_1", "label_2", "label_3", "label_4", "label_5", "label_6"],
                            datasets: [
                                {
                                    label: "Title",
                                    data: [12821, 34581, 21587, 38452, 34831, 48312],
                                    backgroundColor: [
                                        'rgb(61, 85, 69)',
                                        'rgb(115, 71, 71)',
                                        'rgb(166, 178, 174)',
                                        'rgb(209, 191, 169)',
                                        'rgb(66, 63, 62)',
                                        'rgb(43, 43, 43)',
    
                                    ]
                                }
                            ],
                        }
                    }
                    options={
                        {
                            plugins: {
                                legend: {
                                    labels: {
                                        color: "white",
                                        font: {
                                            size: 12
                                        },
                                        padding: 10,
                                    },
                                    title: {
                                        display: true,
                                        text: "A Longer Title To Occupy Space",
                                        color: "grey",
                                        padding: {
                                            bottom: 10
                                        },
                                        font: {
                                            size: 13
                                        }
                                    },
                                    position: "left"

                                },
                                // this is the id that is specified below
                                legendDistance: {
                                    padding: 130 // dictates the space
                                }
                            },
                            elements: {
                                arc: {
                                    borderWidth: 0
                                }
                            },
                            responsive: true,
                            maintainAspectRatio: true,
                            
                        }
                    }
                    plugins={
                        [
                            {
                                id: 'legendDistance',
                                beforeInit(chart, args, opts) {
                                    // Get reference to the original fit function
                                    const originalFit = chart.legend.fit;
                                    // Override the fit function
                                    chart.legend.fit = function fit() {
                                        // Call original function and bind scope in order to use `this` correctly inside it
                                        originalFit.bind(chart.legend)();
                                        // Specify what you want to change, whether the height or width
                                        this.width += opts.padding || 0;
                                    }
                                }
                            }
                        ]
                    }
                />
               
            </div>

这是结果：result

注意：您需要重新加载页面才能看到更改。

Answer 3

对于反应你可以试试这个代码 ->

const legendMargin = {
  id: "legendMargin",
  beforeInit: function (chart) {
    const fitValue = chart.legend.fit;
    chart.legend.fit = function fit() {
      fitValue.bind(chart.legend)();
      return (this.height += 40);
    };
  }
};

然后只需要像这样将legendMargin作为道具传递

<Bar options={options} data={data} plugins={[legendMargin]} />

React-Chart.js：如何增加图例和图表之间的 space？

React-Chart.js : How do I increase the space between the legends and chart?

javascript

reactjs

chart.js

react-chartjs