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