我已经研究了数小时,试图找出这个问题。我使用ChartJS并尝试构建折线图。我的图表与其图例之间似乎没有缝隙,需要在它们之间添加更多的空间。
应该是这样:
但是我知道了(请参阅我的代码段)
这是我的代码:
new Chart(document.getElementById("line-chart"), {
type: "line",
data: {
labels: ["Label1", "Label2", "Label3", "Label4"],
datasets: [
{
label: "A",
fill: false,
data: [10, 30, 60, 100],
borderWidth: 1,
backgroundColor: "red",
borderColor: "red",
},
{
label: "B",
fill: false,
data: [28, 80, 60, 60],
borderWidth: 1,
backgroundColor: "green",
borderColor: "green",
},
],
},
options: {
legend: {
align: "start",
position: "right",
labels: {
usePointStyle: true,
fontSize: 10,
},
},
elements: {
line: {
tension: 0,
},
},
responsive: true,
maintainAspectRatio: false,
},
});
canvas {
height: 35vh !important;
width: 90%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<head></head>
<body>
<canvas id="line-chart"></canvas>
</body>
取决于图例的放置位置,有一些快速修复选项可用。参见this question
对于您的情况,通常,我建议您生成自己的html图例,以便完全控制。
您可以在选项中进行设置:
options: {
legend: {
display:false, //turn default legend off
},
legendCallback : legendBuilder, //link to your custom function returning html string
}
在HTML中定义图例的位置:
<div id="chart-container">
<canvas id="line-chart"></canvas>
<div id="chart-legend"></div>
</div>
然后生成您的图例:
var myLegend = document.getElementById("chart-legend");
myLegend.innerHTML = myChart.generateLegend();