如何在plotly python中将箱线图中位数与多类别x轴连接起来

Question

I'm trying to plot this but could not find any examples in stackoverflow or in plotly forum.我正在尝试绘制此图，但在 stackoverflow 或 plotly 论坛中找不到任何示例。 I put the plotly js example here to reproduce the code better.But the real solution that I need in plotly python .我把 plotly js 示例放在这里是为了更好地重现代码。但是我在plotly python需要的真正解决方案。

Thanks in advance for proving a guide or solution to this problem.预先感谢您提供此问题的指南或解决方案。

Some research but I have multi categorical x axis !!一些研究，但我有多个分类 x 轴！

Shiny: How to add a median line on a box plot using Plotly? Shiny：如何使用 Plotly 在箱线图上添加中线？

Plotly: How to add a median line on a box plot Plotly：如何在箱线图上添加中线

Here is the code I've used.这是我使用过的代码。 Ofcourse modified little bit to represent the actual plot that I want to have.当然修改了一点点来代表我想要的实际情节。 https://plotly.com/javascript/axes/ https://plotly.com/javascript/axes/

 var trace1 = { x: [ ['giraffes', 'orangutans', 'monkeys','giraffes', 'orangutans', 'monkeys'], ['SF Zoo','SF Zoo','SF Zoo','SF Zoo','SF Zoo','SF Zoo'] ], y: [5, 14, 23,12,13,14], boxpoints: 'all', name: 'SF Zoo', type: 'box', boxmean:true }; var trace2 = { x: [ ['giraffes', 'orangutans', 'monkeys','giraffes', 'orangutans', 'monkeys','monkeys','giraffes'], ['LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo'] ], y: [12, 18, 29,22,11,19,12,26], //name: 'LA Zoo', type: 'box', boxmean:true, name: 'LA Zoo', boxpoints: 'all' }; var x= [ ['LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo'], ['giraffes', 'orangutans', 'monkeys','giraffes', 'orangutans', 'monkeys','monkeys','giraffes'] ]; var y = [12, 18, 29,22,11,19,12,26]; var connecting_means = [{ type: 'scatter', x: x, y: y, //mode: 'line', transforms: [{ type: 'aggregate', groups: x, aggregations: [ {target: 'y', func: 'mean', enabled: true}]}] }]; var data = [trace1, trace2,connecting_means]; var layout = { showlegend: true, xaxis: { tickson: "boundaries", ticklen: 15, showdividers: true, dividercolor: 'grey', dividerwidth: 3 } }; Plotly.newPlot('myDiv', data, layout,connecting_means);

 <head> <!-- Load plotly.js into the DOM --> <script src='https://cdn.plot.ly/plotly-2.4.2.min.js'></script> </head> <body> <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div> </body>

Answer 1

As @r-beginners commented, Plotly doesn't have the ability to extract boxplot statistics (such as the median or quartiles).正如@r-beginners 评论的那样，Plotly 无法提取箱线图统计数据（例如中位数或四分位数）。 Therefore, you will need to manually calculate the median of each box, and draw lines between the boxes as traces.因此，您需要手动计算每个框的中值，并在框之间画线作为迹线。

Here is a solution in Plotly.js where we create arrays for each individual boxplot, find their medians using the median function written by @JBallin, and connect them using additional traces.这是 Plotly.js 中的一个解决方案，我们为每个单独的箱线图创建数组，使用 @JBallin 编写的中值函数找到它们的中值，并使用附加跟踪将它们连接起来。 I've restructured your data a bit, and used a loop to connect the boxes within each category.我对您的数据进行了一些重组，并使用循环将每个类别中的框连接起来。 You can find the codepen here .您可以在此处找到代码笔。

var giraffe_sf = [5,12]
var giraffe_la = [12,22,26]
var orang_sf = [13,14]
var orang_la = [18,11]
var monkeys_sf = [14,24]
var monkeys_la = [29,19,12]

sf_y = giraffe_sf.concat(orang_sf, monkeys_sf)
la_y = giraffe_la.concat(orang_la, monkeys_la)

var categories = ['giraffes', 'orangutans', 'monkeys']
var all_data = [[giraffe_sf, giraffe_la], [orang_sf, orang_la], [monkeys_sf, monkeys_la]]

function median(numbers) {
    const sorted = numbers.slice().sort((a, b) => a - b);
    const middle = Math.floor(sorted.length / 2);

    if (sorted.length % 2 === 0) {
        return (sorted[middle - 1] + sorted[middle]) / 2;
    }

    return sorted[middle];
}

// sort the arrays
var trace1 = {
  x: [
    ['giraffes', 'giraffes', 'orangutans', 'orangutans', 'monkeys', 'monkeys'],
    ['SF Zoo','SF Zoo','SF Zoo','SF Zoo','SF Zoo','SF Zoo']
  ],
  y: sf_y,
   boxpoints: 'all',
  name: 'SF Zoo',
  type: 'box',
  boxmean:true

};

var trace2 = {
  x: [
     ['giraffes', 'giraffes', 'giraffes', 'orangutans', 'orangutans', 'monkeys','monkeys', 'monkeys'],
    ['LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo','LA Zoo']
  ],
  y: la_y,
  type: 'box',
  boxmean:true,
  name: 'LA Zoo',
  boxpoints: 'all'
};

var data = [trace1, trace2];

for (let i = 0; i < categories.length; i++) {
  trace = {
    x: [
      [categories[i], categories[i]],
      ['SF Zoo','LA Zoo']
    ],
    y: [median(all_data[i][0]),median(all_data[i][1])],
    mode: 'lines',
    type: 'scatter',
    marker: {color: 'black'},
    showlegend: false
  }
  data.push(trace)
};

var layout = {
  showlegend: true,
  xaxis: {
    tickson: "boundaries",
    ticklen: 15,
    showdividers: true,
    dividercolor: 'grey',
    dividerwidth: 3
  }
};

Plotly.newPlot('myDiv', data, layout);

如何在plotly python中将箱线图中位数与多类别x轴连接起来

问题描述

1 个解决方案

解决方案1
0 2021-11-14 03:35:04

如何在plotly python中将箱线图中位数与多类别x轴连接起来

问题描述

1 个解决方案

解决方案1 0 2021-11-14 03:35:04

解决方案1
0 2021-11-14 03:35:04