Chart.js

Question

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

我正在考虑将图例与另一个 div 分开，例如

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

但如果使用前一种解决方案来实现它会很好。

在此先感谢您的帮助

Answer 1

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

Answer 2

我认为这样的事情应该可行。

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;
              }
            };
          }
        }]

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

Chart.js - Increase spacing between bottom legend and chart

chartjs-2.6.0