[英]Stack series in Plotly.js line chart
Is there an option in Plotly.js to stack line series (series "type": ""
)? Plotly.js 中是否有一个选项可以堆叠线系列(系列"type": ""
)? In the example below the three lines to sum to 100%.在下面的示例中,三行的总和为 100%。
It is possible to show series as either stacked (eg "barmode":"stack") or side-by-side (eg "barmode": "group"
) when they are shown as bars (series "type": "bar"
), as below.当系列显示为条形(系列"type": "bar"
)时,可以将系列显示为堆叠(例如“barmode”:“stack”)或并排(例如"barmode": "group"
) ), 如下。 That doesn't seem to work for lines.这似乎不适用于线路。
CodePen: https://codepen.io/__proto__/pen/OJwOeWv代码笔: https://codepen.io/__proto__/pen/OJwOeWv
How to add series lines to 100% stacked bar charts with plotly 如何使用 plotly 将系列线添加到 100% 堆积条形图
PowerPoint has a similar feature to show lines stacked or not PowerPoint 具有类似的功能来显示线条是否堆叠
Yes, you can set the traces to be stacked by assigning them to a stackgroup
:是的,您可以通过将跟踪分配给堆栈组来将跟踪设置为stackgroup
:
Set several scatter traces (on the same subplot) to the same stackgroup in order to add their y values (or their x values if
orientation
is "h").将多个散点图(在同一个子图上)设置到同一个堆栈组,以便添加它们的 y 值(如果orientation
为“h”,则添加它们的 x 值)。 If blank or omitted this trace will not be stacked.如果空白或省略,则不会堆叠此跟踪。 Stacking also turnsfill
on by default and sets the defaultmode
to "lines" irrespective of point count.堆叠还默认打开fill
并将默认mode
设置为“线”,而不管点数。
And use groupnorm
to normalize the sum of the stackgroup as a percentage: groupnorm: 'percent'
.并使用groupnorm
将堆栈组的总和标准化为百分比: groupnorm: 'percent'
。
Now, since " stacking turns fill
on by default and sets the default mode
to "lines" irrespective of point count ", Plotly will draw a stacked area chart by default, with no marker, ie.现在,由于“默认情况下堆叠打开fill
并将默认mode
设置为“线”而不考虑点数“,Plotly 将默认绘制堆叠面积图,没有标记,即。 : :
So you will need to be explicit in order to obtain stacked lines with markers , that is, by setting fill: 'none'
and mode: 'lines+markers'
to each trace.因此,为了获得带有标记的堆叠线,您需要明确说明,即通过设置fill: 'none'
和mode: 'lines+markers'
到每个轨迹。
You might also need to explicitly set the yaxis rangemode
so that the yaxis range always extends to zero regardless of the input data (as it is the case above when fill is enabled).您可能还需要显式设置rangemode
,以便 yaxis 范围始终扩展到零,而不管输入数据如何(就像上面启用填充时的情况一样)。
In the end you should obtain stacked lines:最后你应该获得堆叠线:
Here the code used for the example above:这里用于上面示例的代码:
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, );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.