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

我有一个条形图，其中我画了3条垂直线，每一条线的顶部都有自己的标签。我希望这些标签位于y轴顶部上方（示例中的30%线上方），但在图例下方。我不知道如何增加顶部图例和图表之间的空间，以便使我的垂直线标签（15、24和33）脱离图表本身，但位于图例下方。有什么想法吗

---

不幸的是，由于没有配置选项来处理此问题，因此实现所需结果的唯一方法是扩展Chart.Legend并实现

afterFit（）

回调

---

这里有一个快速演示如何做到这一点。要更改间距，只需更改第9行中的值（当前设置为50）。当然，这只适用于顶部的图例。希望该示例足够清晰，以便您在需要将图例移到其他位置时进行修改。

如果您希望增加所有图表中的间距，可以在创建之前输入以下代码：

Chart.Legend.prototype.afterFit = function() {
    this.height = this.height + 50;
};

当然，我不会尝试，但我认为您可以更改它（或者在之前复制原始图表对象，以保留原始填充）

---

再见，

如果您想在应用程序中仅对某些图表应用图例下方的填充：

ChartJS>=2.1.0

Chart.plugins.register({
  id: 'paddingBelowLegends',
  beforeInit: function(chart, options) {
    chart.legend.afterFit = function() {
      this.height = this.height + 50;
    };
  }
});

// ----------------------------------
// disable the plugin only for charts
// where you DO NOT WANT the padding
// ----------------------------------

// for raw ChartJS use:
var chart = new Chart(ctx, {
  config: {
    plugins: {
      paddingBelowLegends: false
    }
  }
});

// for angular-chartjs:
$scope.myChart.options.plugins = { paddingBelowLegends: false }
// then in template:
// <canvas class="chart ..." chart-options="myChart.options" ... />

---

See+受

启发，经过两天的研究，这对我有所帮助

Chart.Legend.prototype.afterFit = function() {
    this.height = this.height + 50;
};

在module.ts文件中更新此文件

我正在使用react-chartjs-2（但这只是一个端口，使用相同的配置对象），通过更改图例配置中嵌套的标签配置，我能够实现这一点：

chartOptions = {
  legend: {
    labels: {
      padding: 50 -> this one.
    }
  },

您可以在此处查看属性描述：

---

希望能有所帮助。

我在我的react（react-chartjs-2）项目中尝试了上述方法，但没有成功。这里我有一种不同的方法，比如在图表外创建自定义图例。这样你就可以控制它了

隐藏默认图例

使用任何ref方法获取图例对象

使用html和css循环并创建自定义图例

样品

我知道OP不是关于reactjs组件的，但因为它是一个常见的问题，所以它会帮助一些人

---

.

您可以使用“选项”下的“布局”属性。这帮助了我：

   layout: {
        padding: {
            left: 50,
            right: 130,
            top: 0,
            bottom: 0
        }
    }

---

如果有人想知道为什么

afterFit

解决方案在Chart.js 3.3.0中不起作用，那是因为从图例插件中删除了

afterFit

功能

如果您想通过利用

fit

功能来实现这一点，您可以尝试以下黑客解决方案/解决方法：

const插件={
beforeInit（图表）{
//获取原始拟合函数的引用
const originalFit=chart.legend.fit；
//覆盖拟合函数
chart.legend.fit=函数拟合（）{
//调用原始函数并绑定作用域，以便在其中正确使用'this'
原始绑定（图表、图例）（）；
//按照其他答案中的建议更改高度
这个高度+=15；
}
};
}

---

我知道这不是一个理想的解决方案，但在我们获得本机对该图例填充的支持之前，恐怕这是我们目前所能做的最好的事情。

我理解您在这里所做工作的基本概念，尽管我自己从来没有机会。谢谢这个很好用！！好吧，也许你可以帮我解决一个小问题。这个解决方案看起来很完美，但是我不能再点击图例中的单个项目来打开和关闭数据。有什么想法吗？@BryanLewis在codepen示例中，我可以毫无问题地单击图例项（在codepen中它对您不起作用吗？）如果您谈论的是您的具体实现（不是codepen示例），那么请确保您复制了我示例中的第13-60行（这是允许单击行为正确的原因）你的codepen示例很有效，我复制了所有内容，但它仍然不适用于我。我认为chart.js代码中的其他内容可能会产生干扰。我会进一步测试。谢谢。@jordanwillis我试过你的密码笔样本。它起作用了，但在我的例子中，在应用此图例后，图例在中心对齐。图例不再居中对齐。图例位于顶部。这非常有效。正是我想要的，谢谢！我在2年前发布了这篇文章，我认为如果传说是真实的，那么这是一个技巧below@DorianMaliszewski啊，很好，你有链接吗？我目前正在自己解决这个问题…与上面的答案相同，我已经在angular project中添加了更新位置。这确实为多行图例项添加了一些填充，但没有在图例和图形之间显式添加空格。这是错误的。这是整个画布上的填充，而不是图例和图表之间的填充。

   layout: {
        padding: {
            left: 50,
            right: 130,
            top: 0,
            bottom: 0
        }
    }