我有一个条形图，我在其中绘制了 3 条垂直线，每条线的顶部都有自己的标签。我希望这些标签高于 y 轴的顶部（在示例中高于 30% 线）但低于图例。我不知道如何增加顶部图例和图表之间的空间，以便我可以让我的垂直线标签（15、24 和 33）脱离图表本身但低于图例。有任何想法吗？
问问题
49904 次
8 回答
41
如果您想增加所有图表中的间距，您可以在创建之前放置此代码：
Chart.Legend.prototype.afterFit = function() {
this.height = this.height + 50;
};
当然，我不尝试，但我认为您可以更改它（或之前复制原始 Chart 对象，以保留原始填充）。
再见，
于 2018-09-28T08:01:06.633 回答
27
如果您只想在您的应用程序中为某些图表应用图例下方的填充：
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" ... />
ChartJS >= 2.5.0
支持每个图表的特定插件，应该可以做到：
var chart = new Chart(ctx, {
plugins: [{
beforeInit: function(chart, options) {
chart.legend.afterFit = function() {
this.height = this.height + 50;
};
}
}]
});
请参阅ChartJS 文档+ 受此其他答案的启发
于 2018-11-05T11:58:56.607 回答
20
不幸的是，由于没有配置选项来处理此问题，因此获得所需结果的唯一方法是扩展 Chart.Legend 并实现afterFit()回调。
这是一个快速代码笔，展示了如何做到这一点。要更改间距，只需更改第 9 行中的值（当前设置为 50）。此外，这当然只适用于顶部的图例。希望该示例足够清晰，您可以修改，以防您想将图例移到其他地方。
于 2017-03-03T22:10:46.290 回答
9
经过两天的研究，这对我有所帮助。
Chart.Legend.prototype.afterFit = function() {
this.height = this.height + 50;
};
在 module.ts 文件中更新它
于 2019-03-29T06:43:05.627 回答
8
如果有人想知道为什么该afterFit解决方案在 Chart.js 3.3.0 中不起作用，那是因为afterFit功能已从图例插件中删除。
如果您想通过利用该fit功能来完成这项工作，您可以尝试这个 hacky 解决方案/解决方法：
const plugin = {
beforeInit(chart) {
// Get reference to the original fit function
const originalFit = chart.legend.fit;
// Override the fit function
chart.legend.fit = function fit() {
// Call original function and bind scope in order to use `this` correctly inside it
originalFit.bind(chart.legend)();
// Change the height as suggested in another answers
this.height += 15;
}
};
}
我知道这不是一个理想的解决方案，但是在我们对这个图例填充有本机支持之前，恐怕这是我们现在可以做的一样好。
于 2021-05-27T14:04:54.680 回答
5
我正在使用 react-chartjs-2 （但这只是一个端口并使用相同的配置对象），我能够通过更改嵌套在图例配置中的标签配置来实现：
chartOptions = {
legend: {
labels: {
padding: 50 -> this one.
}
},
您可以在此处查看属性描述： https ://www.chartjs.org/docs/latest/configuration/legend.html
希望能帮助到你。
于 2019-09-12T01:04:42.703 回答
-7
您可以在选项下使用布局属性。这帮助了我：
layout: {
padding: {
left: 50,
right: 130,
top: 0,
bottom: 0
}
}
于 2020-12-03T15:44:56.957 回答