Plotly.js 折线图中的堆栈系列

Question

Plotly.js 中是否有一个选项可以堆叠线系列（系列

"type": ""

）？ 在下面的示例中，三行的总和为 100%。

当系列显示为条形（系列

"barmode": "group"

）时，可以将系列显示为堆叠（例如“barmode”：“stack”）或并排（例如

"type": "bar"

），如下所示。 这似乎不适用于线路。

CodePen：https://codepen.io/__proto__/pen/OJwOeWv

如何使用plotly将系列线添加到100％堆叠条形图

PowerPoint 有类似的功能来显示堆叠或不堆叠的线条

Answer 1

是的，您可以通过将迹线分配给

stackgroup

来设置要堆叠的迹线：

将多个散点迹线（在同一子图上）设置为相同的 stackgroup 以便添加它们的 y 值（或者它们的 x 值，如果

orientation

是“h”）。如果为空或省略，则不会出现此跟踪 堆叠。默认情况下，堆叠还会打开

fill

并设置默认值

mode

到“线”，无论点数多少。

并使用

groupnorm

将堆栈组的总和标准化为百分比：

groupnorm: 'percent'

。

现在，由于“stacking 默认打开

fill

并将默认

mode

设置为“线”，无论点数如何”，Plotly 将默认绘制一个 堆叠区域 图表，没有标记， IE。 :

因此，您需要明确才能获得带有标记的堆叠线，即通过为每条迹线设置

fill: 'none'

和

mode: 'lines+markers'

。

您可能还需要显式设置 y 轴

rangemode

，以便无论输入数据如何，y 轴范围始终扩展到零（就像上面启用填充时的情况一样）。

最后你应该得到堆叠的线：

这里是上面示例中使用的代码：

var traces = [{
  x: [1,2,3], 
  y: [2,1,4], 
  stackgroup: 0, 
  mode: 'lines+markers',
  fill: 'none',
  groupnorm: 'percent' // nb. only the 1st groupnorm found in the group is used
}, {
  x: [1,2,3], 
  y: [1,1,2], 
  stackgroup: 0,
  mode: 'lines+markers',
  fill: 'none'
}, {
  x: [1,2,3], 
  y: [3,0,2], 
  stackgroup: 0,
  mode: 'lines+markers',  
  fill: 'none'
}];

let layout = {
  title: 'Normalized Stacked Lines',
  yaxis: { rangemode: 'tozero' } 
  width: 600,
};

Plotly.newPlot('plot', traces, );

Answer 2

有没有办法对这些进行分组，其中各行仅显示 100 中的百分比？如上图所示？

我正在使用 stackgroup 和 groupnorm 使其达到 100 以内，但我更希望这些行不堆叠在一起。另请注意，我很乐意在查询级别执行此操作，但我正在使用 Retool，我可以将您上面共享的代码放入其中，以直接计算 100 中的相对百分比图表。

感谢您的帮助！