javascript Plotly.js折线图中的堆栈序列

wi3ka0sx  于 2023-08-02  发布在  Java
关注(0)|答案(1)|浏览(78)

Plotly.js中是否有一个选项来堆叠行序列(series "type": "")?在下面的例子中,三条线的总和为100%。

的数据
可以将系列显示为堆叠的(例如“barmode”:“stack”)或并排(例如,"barmode": "group"),如下图所示。这似乎不适用于线。
CodePen:https://codepen.io/proto/pen/OJwOeWv



How to add series lines to 100% stacked bar charts with plotly
PowerPoint有一个类似的功能来显示线条是否堆叠


s4n0splo

s4n0splo1#

是的,您可以通过将轨迹分配给stackgroup来设置要堆叠的轨迹:
将多个散点迹线(在同一子图上)设置到同一堆栈组,以便添加它们的y值(或如果orientation为“h”,则添加它们的x值)。如果为空或省略,则该迹线将不会堆叠。堆叠还默认打开fill,并将默认mode设置为“行”,而不考虑点数。
然后使用groupnorm将堆栈组的总和归一化为百分比:groupnorm: 'percent'的值。
现在,由于“stacking turns fill by default and sets the default mode to“lines”independently of point count”,Plotly将绘制一个 stacked area 图默认情况下,没有标记,即。:


的数据
因此,为了获得 * 标记 * 的 * 堆叠线**,您需要显式设置,即通过将fill: 'none'mode: 'lines+markers'设置到每个跟踪。
您可能还需要显式地设置yaxisrangemode,以便无论输入数据如何,yaxis范围始终扩展到零(就像上面启用fill时的情况一样)。
最后,你应该得到堆叠的线条:



这里的代码用于上面的例子:

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, );

字符串

相关问题