如何实现PrimeNg水平条形图从右到左渲染

解决方案 #

PrimeNG图表底层基于Chart.js实现，你只需要修改两处配置即可实现水平条形图从右到左的渲染效果：

1. 给x轴的ticks配置添加reverse: true，反转数值轴的渲染方向，这是实现反向条形图的核心配置
2. 同步调整数据标签的对齐配置，避免反转后文字和y轴标签重叠

修改后的完整配置如下：

options = {
    tooltips: {
      callbacks: {
        label(tooltipItem, data) {
          const tooltipValue =
            data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          return parseInt(tooltipValue, 10).toLocaleString();
        },
      },
    },
    layout: {
      padding: {
        left: 100,
      },
    },
    legend: {
      display: false,
      position: 'top',
      onClick: (e) => e.stopPropagation(),
      labels: {
        fontColor: '#777777',
      },
    },
    scales: {
      xAxes: [
        {
          display: false,
          stacked: false,
          gridLines: {
            display: false,
          },
          ticks: {
            beginAtZero: false,
            reverse: true // 新增：反转x轴渲染方向
          },
        },
      ],
      yAxes: [
        {
          display: true,
          barThickness: '22',
          stacked: true,
          scaleLabel: {
            display: false,
          },
          gridLines: {
            display: false,
          },
        },
      ],
    },
    plugins: {
      limitCenterText: false,
      datalabels: {
        display: true,
        anchor: 'end',
        align: 'left', // 修改：调整标签对齐方式避免重叠
        formatter(value) {
          return parseInt(value, 10).toLocaleString();
        },
        color: '#777777',
        font: {
          weight: 500,
          family: 'Roboto',
          size: 12,
        },
      },
    },
  };

如果后续你升级到Chart.js 3.x及以上版本，配置逻辑完全一致，仅写法调整为在scales.x.ticks下设置reverse: true即可。

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