增加图例和-chartartJs之间的间距

Question

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

Answer 1

我假设你使用的是chart.js。如果是，您可以使用自定义HTML图例并将样式规则应用于它们。以隐藏的正常图例开始您的图表并将generateLegend（）方法应用于自定义div。

var customChart = new Chart(ctx, { 
    type: 'bar', 
    data: data, 
    options: { 
    legend: { 
     //Because you are going to show your own legend 
     display: false 
    } 
    } 
}); 

//insert legend to any div of your liking and manipulate via CSS 
document.getElementById("custom-legend").innerHTML = customChart.generateLegend() 

文档：http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends

小提琴例如：https://jsfiddle.net/gmyy3rf5/