chart.js - 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;
              }
            };
          }
        }]

Answer 2

您可以将margin-top 用于#js-legend。