Plotly：如何绘制多轴直方图？答案

【问题标题】：Plotly: How to plot histogram with multiple axes?Plotly：如何绘制多轴直方图？
【发布时间】：2021-03-16 13:00:05
【问题描述】：

我会叠加这 2 个下一个直方图要有这个直方图（这个直方图是在这个讨论的答案之后得到的）当我一一显示它们时它可以工作，但问题是当我做 sublopt (px.histogram)

import plotly.graph_objects as go
from plotly.subplots import make_subplots

# Create figure with secondary y-axis
fig = make_subplots(specs=[[{"secondary_y": True}]])

# Add traces
fig.add_trace(
    px.histogram(data, x="mean_rating"),
    secondary_y=False
)

fig.add_trace(
    go.Scatter(x=[2, 3, 4], y=[4, 5, 6], name="yaxis2 data"),
    secondary_y=True,
)

ValueError: 
    Invalid element(s) received for the 'data' property of 
        Invalid elements include: [Figure({

由于在行： fig.add_trace( px.histogram(data, x="mean_rating"),

我无法合并 px.histogram

数据：

data = {'id': {0: 'TZJHLljE',
  1: 'l1NXvwaE',
  2: 'mIICvQHh',
  3: 'kWKvrqYL',
  4: '9tXo1AUZ'},
 'rated': {0: False, 1: True, 2: True, 3: True, 4: True},
 'created_at': {0: 1504210000000.0,
  1: 1504130000000.0,
  2: 1504130000000.0,
  3: 1504110000000.0,
  4: 1504030000000.0},
 'last_move_at': {0: 1504210000000.0,
  1: 1504130000000.0,
  2: 1504130000000.0,
  3: 1504110000000.0,
  4: 1504030000000.0},
 'turns': {0: 13, 1: 16, 2: 61, 3: 61, 4: 95},
 'victory_status': {0: 'outoftime',
  1: 'resign',
  2: 'mate',
  3: 'mate',
  4: 'mate'},
 'winner': {0: 'white', 1: 'black', 2: 'white', 3: 'white', 4: 'white'},
 'increment_code': {0: '15+2', 1: '5+10', 2: '5+10', 3: '20+0', 4: '30+3'},
 'white_id': {0: 'bourgris',
  1: 'a-00',
  2: 'ischia',
  3: 'daniamurashov',
  4: 'nik221107'},
 'white_rating': {0: 1500, 1: 1322, 2: 1496, 3: 1439, 4: 1523},
 'black_id': {0: 'a-00',
  1: 'skinnerua',
  2: 'a-00',
  3: 'adivanov2009',
  4: 'adivanov2009'},
 'black_rating': {0: 1191, 1: 1261, 2: 1500, 3: 1454, 4: 1469},
 'moves': {0: 'd4 d5 c4 c6 cxd5 e6 dxe6 fxe6 Nf3 Bb4+ Nc3 Ba5 Bf4',
  1: 'd4 Nc6 e4 e5 f4 f6 dxe5 fxe5 fxe5 Nxe5 Qd4 Nc6 Qe5+ Nxe5 c4 Bb4+',
  2: 'e4 e5 d3 d6 Be3 c6 Be2 b5 Nd2 a5 a4 c5 axb5 Nc6 bxc6 Ra6 Nc4 a4 c3 a3 Nxa3 Rxa3 Rxa3 c4 dxc4 d5 cxd5 Qxd5 exd5 Be6 Ra8+ Ke7 Bc5+ Kf6 Bxf8 Kg6 Bxg7 Kxg7 dxe6 Kh6 exf7 Nf6 Rxh8 Nh5 Bxh5 Kg5 Rxh7 Kf5 Qf3+ Ke6 Bg4+ Kd6 Rh6+ Kc5 Qe3+ Kb5 c4+ Kb4 Qc3+ Ka4 Bd1#',
  3: 'd4 d5 Nf3 Bf5 Nc3 Nf6 Bf4 Ng4 e3 Nc6 Be2 Qd7 O-O O-O-O Nb5 Nb4 Rc1 Nxa2 Ra1 Nb4 Nxa7+ Kb8 Nb5 Bxc2 Bxc7+ Kc8 Qd2 Qc6 Na7+ Kd7 Nxc6 bxc6 Bxd8 Kxd8 Qxb4 e5 Qb8+ Ke7 dxe5 Be4 Ra7+ Ke6 Qe8+ Kf5 Qxf7+ Nf6 Nh4+ Kg5 g3 Ng4 Qf4+ Kh5 Qxg4+ Kh6 Qf4+ g5 Qf6+ Bg6 Nxg6 Bg7 Qxg7#',
  4: 'e4 e5 Nf3 d6 d4 Nc6 d5 Nb4 a3 Na6 Nc3 Be7 b4 Nf6 Bg5 O-O b5 Nc5 Bxf6 Bxf6 Bd3 Qd7 O-O Nxd3 Qxd3 c6 a4 cxd5 Nxd5 Qe6 Nc7 Qg4 Nxa8 Bd7 Nc7 Rc8 Nd5 Qg6 Nxf6+ Qxf6 Rfd1 Re8 Qxd6 Bg4 Qxf6 gxf6 Rd3 Bxf3 Rxf3 Rd8 Rxf6 Kg7 Rf3 Rd2 Rg3+ Kf8 c3 Re2 f3 Rc2 Rg5 f6 Rh5 Kg7 Rd1 Kg6 Rh3 Rxc3 Rd7 Rc1+ Kf2 Rc2+ Kg3 h5 Rxb7 Kg5 Rxa7 h4+ Rxh4 Rxg2+ Kxg2 Kxh4 b6 Kg5 b7 f5 exf5 Kxf5 b8=Q e4 Rf7+ Kg5 Qg8+ Kh6 Rh7#'},
 'opening_eco': {0: 'D10', 1: 'B00', 2: 'C20', 3: 'D02', 4: 'C41'},
 'opening_name': {0: 'Slav Defense: Exchange Variation',
  1: 'Nimzowitsch Defense: Kennedy Variation',
  2: "King's Pawn Game: Leonardis Variation",
  3: "Queen's Pawn Game: Zukertort Variation",
  4: 'Philidor Defense'},
 'opening_ply': {0: 5, 1: 4, 2: 3, 3: 3, 4: 5},
 'opening_name_trimmed': {0: 'Slav Defense',
  1: 'Nimzowitsch Defense',
  2: "King's Pawn Game",
  3: "Queen's Pawn Game",
  4: 'Philidor Defense'},
 'mean_rating': {0: 1345.5, 1: 1291.5, 2: 1498.0, 3: 1446.5, 4: 1496.0},
 'count': {0: 1, 1: 1, 2: 1, 3: 1, 4: 1},
 'black': {0: 0, 1: 1, 2: 0, 3: 0, 4: 0},
 'draw': {0: 0, 1: 0, 2: 0, 3: 0, 4: 0},
 'white': {0: 1, 1: 0, 2: 1, 3: 1, 4: 1}}

【问题讨论】：

@Nathanmonnier 您知道您的直方图的值将在1200-1500 范围内，并且您有x=[2, 3, 4] 为您提供go.Scatter 跟踪？
This answer 展示了如何使用 Plotly 覆盖直方图的示例。
@S3DEV 确实如此 (+1)，但这些情况并没有受到完全不同的 x 值的影响。
@vestland - 是的，公平竞争。您的回答很好/干净。（+1）。

标签： python plotly data-visualization

【解决方案1】：

错误：

ValueError: 
    Invalid element(s) received for the 'data' property of 
        Invalid elements include: [Figure({

... 被引发是因为您尝试使用 Figure 对象（由 px.histogram 返回）作为不接受此类对象的参数。 fig.add_trace() 接受诸如plotly.graph_objs._scatter 之类的跟踪（由go.Scatter 返回）。这并不意味着您在这里尝试做的事情是不可能的。只是有点麻烦。

您的直方图的值在1200-1500 的范围内，而您的散点图的值在x=[2, 3, 4] 范围内，这对您来说是一个挑战，只要您想拥有一个共享的 x 轴。如果不一定是这种情况，您可以设置双 y 轴和双 x 轴。我不知道您是否愿意用go.Histogram 或px.histogram 来处理其余的问题。我经常看到用户喜欢运行px.histogram，然后在此基础上进行构建的情况。您可以设置一个px.histogram，从那里“窃取”这些值并在go.Histogram 跟踪中使用它们，并将它们与go.Scatter 跟踪结合起来。下面的代码 sn-p 就是为了生成这个图形：

import numpy as np
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd
import plotly.express as px

data = {'id': {0: 'TZJHLljE',
  1: 'l1NXvwaE',
  2: 'mIICvQHh',
  3: 'kWKvrqYL',
  4: '9tXo1AUZ'},
 'rated': {0: False, 1: True, 2: True, 3: True, 4: True},
 'created_at': {0: 1504210000000.0,
  1: 1504130000000.0,
  2: 1504130000000.0,
  3: 1504110000000.0,
  4: 1504030000000.0},
 'last_move_at': {0: 1504210000000.0,
  1: 1504130000000.0,
  2: 1504130000000.0,
  3: 1504110000000.0,
  4: 1504030000000.0},
 'turns': {0: 13, 1: 16, 2: 61, 3: 61, 4: 95},
 'victory_status': {0: 'outoftime',
  1: 'resign',
  2: 'mate',
  3: 'mate',
  4: 'mate'},
 'winner': {0: 'white', 1: 'black', 2: 'white', 3: 'white', 4: 'white'},
 'increment_code': {0: '15+2', 1: '5+10', 2: '5+10', 3: '20+0', 4: '30+3'},
 'white_id': {0: 'bourgris',
  1: 'a-00',
  2: 'ischia',
  3: 'daniamurashov',
  4: 'nik221107'},
 'white_rating': {0: 1500, 1: 1322, 2: 1496, 3: 1439, 4: 1523},
 'black_id': {0: 'a-00',
  1: 'skinnerua',
  2: 'a-00',
  3: 'adivanov2009',
  4: 'adivanov2009'},
 'black_rating': {0: 1191, 1: 1261, 2: 1500, 3: 1454, 4: 1469},
 'moves': {0: 'd4 d5 c4 c6 cxd5 e6 dxe6 fxe6 Nf3 Bb4+ Nc3 Ba5 Bf4',
  1: 'd4 Nc6 e4 e5 f4 f6 dxe5 fxe5 fxe5 Nxe5 Qd4 Nc6 Qe5+ Nxe5 c4 Bb4+',
  2: 'e4 e5 d3 d6 Be3 c6 Be2 b5 Nd2 a5 a4 c5 axb5 Nc6 bxc6 Ra6 Nc4 a4 c3 a3 Nxa3 Rxa3 Rxa3 c4 dxc4 d5 cxd5 Qxd5 exd5 Be6 Ra8+ Ke7 Bc5+ Kf6 Bxf8 Kg6 Bxg7 Kxg7 dxe6 Kh6 exf7 Nf6 Rxh8 Nh5 Bxh5 Kg5 Rxh7 Kf5 Qf3+ Ke6 Bg4+ Kd6 Rh6+ Kc5 Qe3+ Kb5 c4+ Kb4 Qc3+ Ka4 Bd1#',
  3: 'd4 d5 Nf3 Bf5 Nc3 Nf6 Bf4 Ng4 e3 Nc6 Be2 Qd7 O-O O-O-O Nb5 Nb4 Rc1 Nxa2 Ra1 Nb4 Nxa7+ Kb8 Nb5 Bxc2 Bxc7+ Kc8 Qd2 Qc6 Na7+ Kd7 Nxc6 bxc6 Bxd8 Kxd8 Qxb4 e5 Qb8+ Ke7 dxe5 Be4 Ra7+ Ke6 Qe8+ Kf5 Qxf7+ Nf6 Nh4+ Kg5 g3 Ng4 Qf4+ Kh5 Qxg4+ Kh6 Qf4+ g5 Qf6+ Bg6 Nxg6 Bg7 Qxg7#',
  4: 'e4 e5 Nf3 d6 d4 Nc6 d5 Nb4 a3 Na6 Nc3 Be7 b4 Nf6 Bg5 O-O b5 Nc5 Bxf6 Bxf6 Bd3 Qd7 O-O Nxd3 Qxd3 c6 a4 cxd5 Nxd5 Qe6 Nc7 Qg4 Nxa8 Bd7 Nc7 Rc8 Nd5 Qg6 Nxf6+ Qxf6 Rfd1 Re8 Qxd6 Bg4 Qxf6 gxf6 Rd3 Bxf3 Rxf3 Rd8 Rxf6 Kg7 Rf3 Rd2 Rg3+ Kf8 c3 Re2 f3 Rc2 Rg5 f6 Rh5 Kg7 Rd1 Kg6 Rh3 Rxc3 Rd7 Rc1+ Kf2 Rc2+ Kg3 h5 Rxb7 Kg5 Rxa7 h4+ Rxh4 Rxg2+ Kxg2 Kxh4 b6 Kg5 b7 f5 exf5 Kxf5 b8=Q e4 Rf7+ Kg5 Qg8+ Kh6 Rh7#'},
 'opening_eco': {0: 'D10', 1: 'B00', 2: 'C20', 3: 'D02', 4: 'C41'},
 'opening_name': {0: 'Slav Defense: Exchange Variation',
  1: 'Nimzowitsch Defense: Kennedy Variation',
  2: "King's Pawn Game: Leonardis Variation",
  3: "Queen's Pawn Game: Zukertort Variation",
  4: 'Philidor Defense'},
 'opening_ply': {0: 5, 1: 4, 2: 3, 3: 3, 4: 5},
 'opening_name_trimmed': {0: 'Slav Defense',
  1: 'Nimzowitsch Defense',
  2: "King's Pawn Game",
  3: "Queen's Pawn Game",
  4: 'Philidor Defense'},
 'mean_rating': {0: 1345.5, 1: 1291.5, 2: 1498.0, 3: 1446.5, 4: 1496.0},
 'count': {0: 1, 1: 1, 2: 1, 3: 1, 4: 1},
 'black': {0: 0, 1: 1, 2: 0, 3: 0, 4: 0},
 'draw': {0: 0, 1: 0, 2: 0, 3: 0, 4: 0},
 'white': {0: 1, 1: 0, 2: 1, 3: 1, 4: 1}}

data = pd.DataFrame(data)

fig=make_subplots(
        specs=[[{"secondary_y": True}]])

fig.update_layout(xaxis2= {'anchor': 'y', 'overlaying': 'x', 'side': 'top'},
                  yaxis_domain=[0, 0.94]);


hist = px.histogram(data, x="mean_rating")

fig.add_trace(
    go.Histogram(x=hist.data[0].x,
           y=hist.data[0].y,
           name="histogram trace, left y and lower x",
          ), secondary_y=False)
fig.add_trace(
    go.Scatter(x=[2, 3, 4],
               y=[4, 5, 6],
               name="Scatter trace, right y and upper x",
               line_color="#ee0000"), secondary_y=True)
fig.data[1].update(xaxis='x2')
fig.update_layout(width=700, height=475)
fig.show()

【讨论】：