这是一种将 marginTop 置于 Donut Chartjs 图表底部的图例的方法吗？

Question

我正在使用 ChartJS 处理甜甜圈图，但在尝试在图表和图例之间创建某种空间时遇到了麻烦。

这是我的传奇配置：

plugins: {
  legend: {
    display: true,
    align: 'start',
    position: 'bottom',
  }
}

这就是我编写的用于为图例添加更多高度的插件：

const LegendMargin = {
  id: 'LegendMargin',
  beforeInit(chart, legend, options) {
    const fitValue = chart.legend.fit;

    chart.legend.fit = function fit() {
      fitValue.bind(chart.legend)();

      this.height += 40;
    }
  }
}

该插件增加了图表下方图例的高度，但文本仍然与框顶部对齐，这并不能解决问题。

我可以以某种方式将文本对齐到框的底部或在图例和图表之间创建某种边距/填充吗？

太感谢了

Answer 1

似乎可以使用该legend.top属性来控制图例顶部位置。但这个属性是由chart.js 本身管理的。所以如果你改变它，就会被覆盖。因此，解决这个问题的一种巧妙方法是使用Object.defineProperty拦截调用，legend.top如下所示：

const LegendMarginPlugin = {
  id: 'LegendMarginPlugin',
  beforeInit(chart, legend, options) {
    const fitValue = chart.legend.fit;

    chart.legend.fit = function fit() {
      fitValue.bind(chart.legend)();

      let top;
      const marginTop = 30;

      Object.defineProperty(this, 'top', {
        get() {
          return top + marginTop;
        },
        set(v) {
          top = v;
        },
      });

      this.height += 40;
    };
  },
};

该值30和40此处是您可能需要根据需要进行调整的示例值。

请记住，由于这不是公共 API，因此在未来的版本中可能会出现问题，但它在 Chart.js 3.9.0 上适用于我

理想的情况是，它们在配置选项上添加对完整Paddingoptions.plugins.legend.labels.padding对象的支持，以便您可以padding.top在那里使用。但目前只有一个数值有效