如何在devExtreme库的图表中将两个系列组合成一个值轴？

Question

我试着在一张图表中显示两个系列。问题是-这个系列是分开的。我希望它们在0上启动值字段。下面是模板：

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

dataSource在服务中从数组返回：

const data = [
    {
      Name: 'First test',
      Count: -1,
      Sum: 12800,
    },
    {
      Name: 'Second test',
      Count: -1,
      Sum: 25000,
    },
    {
      Name: 'Third test',
      Count: -1,
      Sum: 16500,
    },
    {
      Name: 'Fourth test',
      Count: -3,
      Sum: 10750,
    },
    {
      Name: 'Fifth test',
      Count: -45,
      Sum: 107409,
    },
  ];

目前的结果是：

我怎么把这两个系列结合起来呢？

Answer 1

所需的标记称为dxi-value-axis，其参数称为synchronizedValue。(顺便说一句，还有另一个类似的标签名为dxo-value-axis。请在下面评论，如果你知道，请)。因此，基本上，您必须给出您的系列"axis“参数，并在dxi-value-axis中引用它作为name参数，并将标记放在dx-chart标记中：

<dxi-value-axis
      [synchronizedValue]="0"
      name="yourAxisNameInsideSeries"
      [visualRange]="[-45, 0]"
      [visible]="true"
    ></dxi-value-axis>
    <dxi-value-axis
      [synchronizedValue]="0"
      name="yourAxisNameInsideSeries"
      [visualRange]="[0, 107409]"
      [visible]="true"
></dxi-value-axis>