ChartJS 这是一种将图例置于圆环图底部的方式吗？

kqhtkvqz 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(180)

我正在使用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;
    }
  }
}

此插件增加了图表下方图例的高度，但文本仍然与框的顶部对齐，这并没有解决问题。
我可以用某种方法将文本与框的底部对齐，或者在图例和图表之间创建某种边距/填充吗？
非常感谢

chart.js

来源：https://stackoverflow.com/questions/73225423/is-that-a-way-to-margintop-a-legend-positioned-on-bottom-of-a-doughnut-chartjs-g

1条答案

按热度按时间

erhoui1w1#

看起来可以使用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.js3.9.0有效
理想的情况是，他们在options.plugins.legend.labels.padding配置选项上添加了对完整Padding对象的支持，这样您就可以在那里使用padding.top。

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS 这是一种将图例置于圆环图底部的方式吗？

1条答案

相关问题

热门标签

最新问答