增加图例和-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/