如何在DevExtreme图表中将两个系列合并到一个值轴？

问题根源 #

你当前的图表有两个核心问题导致系列分离：

1. 两个系列指定了独立的数值轴（countAxis和sumAxis），导致它们基于不同轴渲染，自然分离。
2. Count字段为负数、Sum为正数，默认stackedbar类型会将正负值分别堆叠在0的两侧，视觉上呈现分离状态。

解决方案 #

根据你的需求，提供两种适配不同业务场景的方案：

方案1：保留正负含义，让系列从0向两侧延伸 #

改用bar类型替代stackedbar，共用单个数值轴并配置包含正负值的视觉范围，两个系列会分别从0向两侧延伸，实现同组展示：

<dx-chart id="chart" [dataSource]="dataSource" [rotated]="true">
  <dxi-series valueField="Count" name="Count"></dxi-series>
  <dxi-series valueField="Sum" name="Sum"></dxi-series>
  
  <dxo-common-series-settings
    argumentField="Name"
    type="bar"
  ></dxo-common-series-settings>
  
  <dxo-value-axis>
    <dxo-label [format]="{ type: 'decimal' }"></dxo-label>
    <!-- 根据你的数据范围设置视觉区间，确保覆盖所有正负值 -->
    <dxo-visual-range [startValue]="-50" [endValue]="120000"></dxo-visual-range>
  </dxo-value-axis>
  
  <dxo-legend [visible]="true"></dxo-legend>
</dx-chart>

方案2：统一为正数堆叠（适合不需要保留负数含义的场景） #

将Count字段转为绝对值，继续使用stackedbar类型，两个系列会从0开始向上（旋转后向右）堆叠展示：

第一步：处理数据源

// 转换Count为绝对值，保留原数据其他字段
const processedData = data.map(item => ({
  ...item,
  Count: Math.abs(item.Count)
}));
// 将processedData赋值给dataSource

第二步：修改图表模板

<dx-chart id="chart" [dataSource]="processedData" [rotated]="true">
  <dxi-series valueField="Count" name="Count"></dxi-series>
  <dxi-series valueField="Sum" name="Sum"></dxi-series>
  
  <dxo-common-series-settings
    argumentField="Name"
    type="stackedbar"
  ></dxo-common-series-settings>
  
  <dxo-legend [visible]="true"></dxo-legend>
</dx-chart>

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