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

Question

Plotly.js 中是否有用于堆叠线系列（系列 "type": ""）的选项？在下面的示例中，三行的总和为 100%。

当系列显示为条形（系列"type": "bar"）时，可以将系列显示为堆叠（例如“barmode”：“stack”）或并排（例如"barmode": "group"），如下所示。这似乎不适用于线路。

代码笔：https://codepen.io/__proto__/pen/OJwOeWv

How to add series lines to 100% stacked bar charts with plotly

PowerPoint 具有类似的功能来显示线条是否堆叠

Answer 1

是的，您可以通过将跟踪分配给 stackgroup 来设置要堆叠的跟踪：

将多个散点图（在同一个子图上）设置为相同的 stackgroup 以便添加它们的 y 值（或它们的 x 值，如果 orientation 是“h”）。如果空白或省略此跟踪将不会 堆叠。堆叠还默认打开fill并设置默认mode 到“线”，而不管点数。

并使用 groupnorm 将堆栈组的总和标准化为百分比：groupnorm: 'percent'。

现在，因为“堆叠默认打开fill并将默认的mode设置为“行”而不考虑点数", Plotly 会画一个堆积区默认情况下的图表，没有标记，即。 :

所以你需要明确才能获得堆积线和标记，也就是说，通过设置 fill: 'none' 和 mode: 'lines+markers' 到每个跟踪，即。 :

这里用于上面示例的代码：

var traces = [{
  x: [1,2,3], 
  y: [2,1,4], 
  stackgroup: 0, 
  mode: 'lines+markers',
  fill: 'none',
  groupnorm: 'percent'
}, {
  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'
}];

Plotly.newPlot('plot', traces, {title: 'Normalized Stacked Lines', width: 600});