Plotly JS堆叠面积图未堆叠仅叠加，Angular代码修改求助

我的Plotly图表当前仅呈现叠加效果而非堆叠状态，图表截图如下：

以下是我的Angular实现代码：

diag.timeseries.forEach(timeSerie => {
          let plot: any = {
            y: timeSerie.values,
            name: timeSerie.name,
            marker: { color: timeSerie.color }
          };
          if (timeSerie.name == null || timeSerie.name == "") {
            plot.name = timeSerie.id;
          }
          if (timeSerie.type === 'boxplot') {
            plot.type = 'box';

          } else if (timeSerie.type === 'stackedsplinearea') {
            plot.type = 'scatter'
            plot.fill = 'tozeroy';
            plot.x = diag.timestamps;
          } else {
            plot.mode = 'lines';
            plot.x = diag.timestamps;
          }

          if (timeSerie.yAxis === '2') {
            plot.yaxis = "y2";
          }

          if (!this.showZeroValues && timeSerie.values.every(v => v === 0) && diag.timeseries.some(ts => ts.type !== 'bar')) {
            plot.visible = false;
          } else {
            plot.visible = true;
          }

          graph.data = [
            ...graph.data,
            plot
          ];

        });

希望了解如何修改代码，使图表的轨迹（plots）实现堆叠效果。

要让Plotly的填充面积类轨迹实现堆叠，需要做两个关键修改：

• 给所有需要堆叠的轨迹设置统一的stackgroup属性：Plotly通过stackgroup识别哪些轨迹属于同一堆叠组，同组内的轨迹会自动堆叠。
• 确保堆叠轨迹使用同一Y轴：跨Y轴（比如左侧y和右侧y2）的轨迹无法实现堆叠，需统一到同一轴。

修改后的代码如下（重点调整stackedsplinearea分支）：

diag.timeseries.forEach(timeSerie => {
          let plot: any = {
            y: timeSerie.values,
            name: timeSerie.name,
            marker: { color: timeSerie.color }
          };
          if (timeSerie.name == null || timeSerie.name == "") {
            plot.name = timeSerie.id;
          }
          if (timeSerie.type === 'boxplot') {
            plot.type = 'box';

          } else if (timeSerie.type === 'stackedsplinearea') {
            plot.type = 'scatter';
            plot.fill = 'tozeroy';
            plot.x = diag.timestamps;
            // 核心：添加stackgroup，同组轨迹用相同值即可
            plot.stackgroup = '1';
            // 可选：开启平滑曲线，匹配splinearea的需求
            plot.line = { shape: 'spline' };
          } else {
            plot.mode = 'lines';
            plot.x = diag.timestamps;
          }

          if (timeSerie.yAxis === '2') {
            plot.yaxis = "y2";
            // 注意：如果要堆叠，这里需要把轨迹统一到y轴，注释掉上面一行并打开下面一行
            // plot.yaxis = "y";
          }

          if (!this.showZeroValues && timeSerie.values.every(v => v === 0) && diag.timeseries.some(ts => ts.type !== 'bar')) {
            plot.visible = false;
          } else {
            plot.visible = true;
          }

          graph.data = [
            ...graph.data,
            plot
          ];

        });

补充提示：

• 如果有多组独立的堆叠需求，可以设置不同的stackgroup值（比如'1'、'2'），每组会各自堆叠。
• 折线类型的轨迹如果需要堆叠，同样可以添加stackgroup属性实现。

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