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

【问题标题】：React-Chart.js : How do I increase the space between the legends and chart?React-Chart.js：如何增加图例和图表之间的空间？
【发布时间】：2021-08-15 03:33:59
【问题描述】：

有几个问题与我的思路相同。然而，这些问题只集中在 chart.js 上。我有类似的问题，但在 react-chart.js 上。 如何增加图例和图表之间的间距？ 我使用过padding，但它只会增加图例之间的间距。不完全是我想要的。下面是我的圆环图组件。

 <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>

我的图表是什么样子的：

【问题讨论】：

标签： javascript reactjs chart.js react-chartjs

【解决方案1】：

您可以编写一个自定义插件，如 answer 所示，但不是在高度上添加一些额外的空间，而是需要在图例框的宽度上添加一些额外的间距：

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>

【讨论】：

【解决方案2】：

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

<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

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

【讨论】：