Angular(v14.2.12)中如何调整PrimeNG(v14.2.2)环形图标签至左侧

针对你尝试将PrimeNG环形图（Doughnut）的标签（图例）对齐到左侧却失败的问题，结合Chart.js的版本差异，给出以下可行配置：

分版本配置方案 #

若使用Chart.js v3+（PrimeNG 14及以上版本） #

PrimeNG 14+适配Chart.js v3，配置需嵌套在plugins字段下，同时可通过labels.align控制标签文字左对齐，配合布局padding避免图例被截断：

this.options = {
  plugins: {
    legend: {
      position: 'left', // 将图例整体定位到图表左侧
      align: 'center', // 图例在垂直方向居中
      labels: {
        align: 'left', // 让每个图例的标签文字左对齐
        fontSize: 8,
        padding: 10 // 可选：调整标签间的间距
      }
    }
  },
  layout: {
    padding: {
      left: 80 // 可选：给左侧图例预留足够空间，防止被容器截断
    }
  }
};

模板代码保持正确绑定：

<p-chart type="doughnut" #pchart [data]="data" width="25vw" height="45vh" [options]="options"></p-chart>

若使用Chart.js v2（PrimeNG 13及以下版本） #

此版本无需嵌套plugins，直接配置legend字段即可：

this.options = {
  legend: {
    position: 'left',
    align: 'center',
    labels: {
      align: 'left',
      fontSize: 8,
      padding: 10
    }
  },
  layout: {
    padding: {
      left: 80
    }
  }
};

额外排查点 #

• 确认data中的labels数组已正确定义，每个数据集对应匹配的标签内容；
• 检查全局CSS是否存在text-align等样式覆盖图例的默认对齐方式；
• 若图表容器宽度过小，适当调整width属性或layout.padding.left值，给图例留出足够显示空间。

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