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

Question

我正在尝试实现类似this的功能，但图例位于底部。 当我尝试最多添加它时，我会得到以下信息：

我正在考虑将图例与

等另一个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

您可以为＃js-legend使用margin-top。