Chart.js - 增加底部图例和图表之间的间距

Question

我正在尝试实现类似的目标，但底部有图例。当我尝试添加它最多时我可以得到这样的东西：

我正在考虑将图例分离到另一个div，例如

<div id="js-legend" class="chart-legend"></div>

但用以前的解决方案来实现它会很好。

先谢谢您的帮助

Answer 1

我认为这样的事情应该有效。

plugins: [{
          beforeInit: (chart, options) => {
            chart.legend.afterFit = () => {
              if (chart.legend.margins) {
                // Put some padding around the legend/labels
                chart.legend.options.labels.padding = 20;
                // Because you added 20px of padding around the whole legend,
                // you will need to increase the height of the chart to fit it
                chart.height += 40;
              }
            };
          }
        }]