Plotly.js是否支持折线图系列堆叠以实现总和100%？

Plotly.js 没有像柱状图barmode: "stack"那样直接支持折线图堆叠的内置配置项，要实现折线图的堆叠（包括100%堆叠），需要手动预处理数据，再通过折线图组件绘制。

实现思路 #

1. 普通堆叠折线图 #

对每个系列的y值进行累计计算：

• 第一个系列的y值保持原始数据
• 第二个系列的每个y值 = 自身原始值 + 第一个系列对应位置的y值
• 第三个系列的每个y值 = 自身原始值 + 前两个系列对应位置的累计值
  以此类推，得到每个系列的堆叠后y值，再绘制折线图。

2. 100%堆叠折线图（总和为100%） #

1. 先计算每个x轴位置上所有系列的数值总和
2. 将每个系列的每个点值除以对应位置的总和，得到百分比
3. 对百分比进行累计计算（同普通堆叠的逻辑），得到累计百分比作为折线的y值

示例效果 #

100%堆叠折线图示例 #

未堆叠的折线图效果 #

PowerPoint 同类功能参考 #

代码实现示例 #

// 原始数据
const rawData = {
  x: ['A', 'B', 'C', 'D'],
  series1: [20, 30, 25, 40],
  series2: [30, 20, 35, 25],
  series3: [50, 50, 40, 35]
};

// 计算100%堆叠的累计百分比
const getStackedPercentData = (data) => {
  const { x, ...series } = data;
  const seriesKeys = Object.keys(series);
  const stackedData = {};
  
  // 计算每个x位置的总和
  const totals = x.map((_, idx) => {
    return seriesKeys.reduce((sum, key) => sum + series[key][idx], 0);
  });
  
  // 计算每个系列的累计百分比
  let prevCumulative = new Array(x.length).fill(0);
  seriesKeys.forEach(key => {
    stackedData[key] = series[key].map((val, idx) => {
      const percent = (val / totals[idx]) * 100;
      const cumulative = prevCumulative[idx] + percent;
      prevCumulative[idx] = cumulative;
      return cumulative;
    });
  });
  
  return { x, ...stackedData };
};

const stackedData = getStackedPercentData(rawData);

// 绘制Plotly折线图
Plotly.newPlot('myDiv', [
  {
    x: stackedData.x,
    y: stackedData.series1,
    type: 'scatter',
    mode: 'lines+markers',
    name: '系列1'
  },
  {
    x: stackedData.x,
    y: stackedData.series2,
    type: 'scatter',
    mode: 'lines+markers',
    name: '系列2'
  },
  {
    x: stackedData.x,
    y: stackedData.series3,
    type: 'scatter',
    mode: 'lines+markers',
    name: '系列3'
  }
], {
  yaxis: {
    title: '百分比',
    range: [0, 100],
    ticksuffix: '%'
  },
  title: '100%堆叠折线图'
});

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