增加折线图和图例 ChartJS 之间的差距答案

【问题标题】：Increase gap between line-chart and legend ChartJS增加折线图和图例 ChartJS 之间的差距
【发布时间】：2020-04-17 04:08:25
【问题描述】：

我已经研究了好几个小时试图找出这个问题。我使用 ChartJS 并尝试构建折线图。看来我的图表和它的图例之间没有差距，需要在它们之间添加更多空间。

应该是这样的：

但我得到了这个（见我的代码 sn-p）

这是我的代码：

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>

【问题讨论】：

标签： vue.js chart.js linechart

【解决方案1】：

根据图例的放置位置，有一些可用的快速修复选项。见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();

working example

【讨论】：

谢谢！感谢你的帮助。但是，是否可以在该 legendCallback 上添加默认的 onClick 函数？
我已经更新了小提琴以展示你如何实现这一点。