ngx-charts-bar-vertical-2d柱状图条形堆叠无法分开展示问题求解

• 核心配置缺失：ngx-charts-bar-vertical-2d 组件默认以堆叠模式渲染条形，必须显式传入[grouped]="true"配置，才会切换为同X轴节点下多条形并列分栏的分组模式，这是出现堆叠显示的核心原因。
• 模板绑定写法错误：你把[results]="multi"属性写在了组件开始标签的尖括号外部，这部分内容会被当做普通文本节点渲染，根本不会绑定到组件的输入属性上，组件无法正确接收传入的数据。
• 数据集语法错误：组件要求多系列数据为标准对象数组格式，需要用方括号[]包裹所有系列对象。你当前的multi定义开头误写了左大括号{，结尾多写了对应的闭合大括号}，属于非法TS/JS语法，会导致数据解析异常。

1. 修正组件模板写法，将所有属性绑定移到开始标签内部，补充grouped配置：

<ngx-charts-bar-vertical-2d
  [results]="multi"
  [grouped]="true"
>
</ngx-charts-bar-vertical-2d>

可根据业务需求补充其他常用配置，比如[xAxis]="true"、[yAxis]="true"、[legend]="true"、[view]="[chartWidth, chartHeight]"等。

2. 修正multi数据集语法，移除多余的大括号，改为标准数组格式：

multi = [
  {
    name: 'sample1', 
    series: [
      {
        value: 100004096,
        name: '20/06/2022'
      },
      {
        value: 200004096, 
        name: '21/06/2022'
      }
    ]
  },
  {
    name: 'sample2', 
    series: [
      {
        value: 100004096, 
        name: '20/06/2022'
      }, 
      {
        value: 200004096, 
        name: '21/06/2022'
      }
    ]
  },
  {
    name: 'sample3', 
    series: [
      { 
        value: 20501094656, 
        name: '20/06/2022'
      }, 
      {
        value: 20601094656, 
        name: '21/06/2022'
      }
    ]
  }
];

修改完成后，X轴的每个日期节点下会并列展示sample1、sample2、sample3三个独立条形，不会再出现堆叠。如果仍有显示异常，可以检查当前使用的ngx-charts版本是否与API匹配，是否有全局CSS样式覆盖了图表内条形的宽度、定位属性。

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