如何在VueChartjs中调整饼图图例标签的显示位置

可以实现，你只需要调整对应图表配置项即可，VueChartjs完全兼容原生Chart.js的所有配置参数。

具体操作步骤 #

1. 找到你饼图组件的options配置项，根据你使用的Chart.js版本调整图例参数：

• 如果你使用的是 Chart.js v3及以上版本，图例配置放在plugins字段下：

const pieChartOptions = {
  responsive: true,
  plugins: {
    legend: {
      // 直接将图例整体定位到图表下方
      position: 'bottom',
      // 图例居中对齐，和你预期的效果图一致
      align: 'center',
      labels: {
        // 调整图例和饼图之间的上下间距，单位为px，可根据实际效果调整数值
        padding: 20,
        // 还可按需调整标签字体大小、颜色等样式
        font: {
          size: 14
        }
      }
    }
  }
}

• 如果你使用的是 Chart.js v2版本，直接将legend配置放在options第一层即可：

const pieChartOptions = {
  responsive: true,
  legend: {
    position: 'bottom',
    align: 'center',
    labels: {
      padding: 20
    }
  }
}

2. 如果调整完上述配置后位置仍不符合预期，可以额外配置layout.padding参数调整画布整体内边距，进一步适配你需要的间距效果。

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