Chart.js水平堆叠条形图用chartjs-plugin-labels加内部标签不显示

堆叠条形图标签不显示由两个配置错误导致：

• 笛卡尔坐标系图表（条形图、折线图）的plugins.labels配置需要传入对象格式，你当前写的数组格式仅适用于饼图、环形图等极坐标类图表，会导致插件无法正确读取渲染规则
• 堆叠条形图必须在对应坐标轴上显式开启stacked: true配置，你仅在数据集上加了stack: 'a'属性，轴配置未开启堆叠，插件无法识别独立的堆叠分段边界，因此不会渲染标签

1. 将plugins.labels的配置从数组格式改为对象格式
2. 在x轴、y轴配置中补充stacked: true，开启堆叠结构识别
3. 补充overlap: true配置，允许堆叠分段的标签独立渲染互不冲突

修正后的完整stackedChartOptions代码如下：

public stackedChartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    labels: {
      render: function (args) {
        return args.value;
      },
      position: "inside",
      fontColor: "#023d7d",
      fontSize: 12,
      overlap: true,
      precision: 1
    }
  },
  scales: {
    yAxes: [
      {
        stacked: true,
        ticks: {
          fontSize: 12,
          fontColor: "#023d7d"
        }
      }
    ],
    xAxes: [
      {
        stacked: true,
        ticks: {
          min: 0,
          max: 100,
          fontSize: 12,
          fontColor: "#023d7d",
          precision: 0
        }
      }
    ]
  }
};

其余代码（插件引入逻辑、数据集配置、HTML模板）不需要改动，保存刷新后即可在每个堆叠条形分段上看到对应的数值标签。如果需要调整标签位置，修改position参数即可，支持inside、outside、default三个可选值。

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