增加图例和图表之间的空间答案

【问题标题】：Increase space between legend and chart增加图例和图表之间的空间
【发布时间】：2019-03-31 15:41:52
【问题描述】：

我正在使用角度为 7 的 ng2 图表。我有一个饼图

如何增加图例和图表之间的间距？

我正在尝试这样做，但它不起作用。

public pieChartOptions: ChartOptions = {
    responsive: true,

    rotation: 0,

    plugins: {
      afterFit: function(chart, options) {
        chart.plugins.register({
          afterFit: function() {
            this.height = this.height + 150;
          },
        })
      },

      datalabels: {
        align: 'end',
        anchor: 'end',
        formatter: (value, ctx) => {
          const label = ctx.chart.data.labels[ctx.dataIndex];
          return value + '% ';
        },

        font: {
          weight: 'bold',
          size: 16,
        }
      }
    }
  };

【问题讨论】：

Chart.js - Increase spacing between legend and chart的可能重复
感谢您的回复。我试过了。但是不行
检查你使用的chart.js版本并尝试了Like tat页面？
我把这条线放在哪里 Chart.Legend.prototype.afterFit = function() { this.height = this.height + 50; };
@gowthamrajan 我试过这个插件：{ afterFit: function(chart, options) { chart.Legend.prototype.afterFit = function() { this.height = this.height + 50; }; }，但不工作：（

标签： angular chart.js ng2-charts

【解决方案1】：

@gowtham rajan 是正确的，基于this answer 你可以使用一个简单的内联插件来完成这项工作：

{
  beforeInit: function(chart, options) {
    chart.legend.afterFit = function() {
      this.height += 100; // must use `function` and not => because of `this`
    };
  }
}

以stackblitz 为例

【讨论】：