Chart.js-增加图例和图表之间的间距 [英] Chart.js - Increase spacing between legend and chart

问题描述

我有一个条形图，在其中绘制了3条垂直线，每条垂直线在顶部都有自己的标签。我希望这些标签位于y轴的上方（示例中30％线上方）但位于图例下方。我无法弄清楚如何增加顶部图例和图表之间的间隔，以使垂直线标签（15、24和33）不在图表本身的下方，而是在图例的下方。有任何想法吗？

解决方案

不幸的是，由于没有配置选项可以处理此问题，因此您可以实现所需结果的唯一方法是扩展Chart.Legend并实现 afterFit（）回调。 / p>

下面是一个快速的 codepen ，显示了如何做到这一点。要更改间距，只需更改第9行中的值（当前设置为50）。此外，这当然仅适用于顶部的图例。希望该示例足够清楚，以防您要将图例移到其他地方。

I have a bar chart where I have drawn 3 vertical lines, each with it's own label at the top. I would like those labels to be above the top of the y-axis (above the 30% line in the example) but below the legend. I can't figure out how to increase the space between the top legend and the chart such that I can have my vertical line labels (15, 24 & 33) be off of the chart itself but below the legend. Any ideas?

解决方案

Unfortunately, since there is no config option to handle this the only way you can achieve the desired result is to extend Chart.Legend and implement the afterFit() callback.

Here is a quick codepen showing how to do just that. To change the spacing, just change the value in line 9 (currently set to 50). Also, this of course only works with the legend at the top. Hopefully, the example is clear enough for you to modify in case you want to move your legend elsewhere.

这篇关于Chart.js-增加图例和图表之间的间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！