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

【问题标题】：Increase spacing between legend and -chartartJs增加图例和 -chartJs 之间的间距
【发布时间】：2017-05-27 01:15:50
【问题描述】：

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

【问题讨论】：

标签： javascript charts

【解决方案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/

【讨论】：