Angular+Chart.js问题：图例无法贴近图表的位置调整求助

我正在使用Chart.js开发图表，其他功能均正常，但遗憾的是无法将图例设置为贴近图表（当前效果如图一所示，期望达到图二的图例效果）。我的代码如下：

this.chart = new Chart(this.chartRef.nativeElement, {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [
        this.randomScalingFactor(),
        this.randomScalingFactor(),
        this.randomScalingFactor(),
        this.randomScalingFactor(),
      ],
      label: 'Dataset 1',
      backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#e8c3b9"],
    }],
    labels: [
      '0.11 - 0.15 EUR',
      '0.16 - 0.20 EUR',
      '0.20 - 0.24 EUR',
      '0.24 - 0.28 EUR',
    ]
  },
  options: {
    responsive: true,
    legend: {
      position: 'right'
    },
    title: {
      display: true,
      text: 'Service desk in English'
    },
    animation: {
      animateScale: true,
      animateRotate: true
    }
  }
});

组件中仅包含以下代码：

<canvas #lineChart>{{ chart }}</canvas>

请问有解决办法吗？

我之前也碰到过类似的需求，通过调整Chart.js里的几个图例和布局配置项，就能让图例更贴近甜甜圈图表。试试下面的修改方案：

1. 缩小图例内部的间距 #

默认的图例方块宽度和标签间距都偏大，这是导致图例和图表之间空隙大的主要原因之一，我们可以直接调整这些参数：

legend: {
  position: 'right',
  labels: {
    padding: 5, // 减小每个图例标签之间的垂直间距（默认值是10）
    boxWidth: 10 // 缩小图例前的彩色方块宽度（默认值是40）
  }
}

2. 调整图表整体布局的内边距 #

如果图表本身和容器右侧有多余留白，可以通过layout.padding来缩小右侧的空隙，让图例更靠近图表：

layout: {
  padding: {
    right: 10 // 根据实际视觉效果调整数值，减小图表右侧的内边距
  }
}

3. 可选：使用更紧凑的图例标记样式 #

如果想要图例视觉上更精简，可以开启usePointStyle，用圆点代替默认的方块标记：

legend: {
  position: 'right',
  labels: {
    padding: 5,
    boxWidth: 10,
    usePointStyle: true // 启用后会用点样式替代方块，整体更紧凑
  }
}

完整配置示例 #

把这些配置整合到你的options里，最终代码如下：

options: {
  responsive: true,
  layout: {
    padding: {
      right: 10
    }
  },
  legend: {
    position: 'right',
    labels: {
      padding: 5,
      boxWidth: 10,
      usePointStyle: true // 可选，根据需求决定是否开启
    }
  },
  title: {
    display: true,
    text: 'Service desk in English'
  },
  animation: {
    animateScale: true,
    animateRotate: true
  }
}

你可以根据自己的视觉需求微调padding、boxWidth这些数值，直到达到你想要的贴近效果。

内容的提问来源于stack exchange，提问作者PawelC