Python Plotly图表，辅助x轴与主x轴相连

Question

我一直在苦苦思索这个看似简单的任务：如何对齐两个相关数据的x轴。在我的情况下，一个轴是摄氏度，另一个是华氏度。

我想要实现的是获得两个x轴的对齐，使得：

32°F = 0°C 并且 50°F = 10°C

有了这个关系，两个数据集将在温度方面对齐。

我希望在同一张图上同时显示两个单位集，以便观众可以根据他们习惯的单位解释数据。

以下是我的代码：

import plotly.graph_objects as go
from plotly.subplots import make_subplots
from plotly.graph_objs.layout import YAxis,XAxis,Margin

layout = go.Layout(
    title="Double X Axis Example",
    xaxis=XAxis(
        title="Celcius"
    ),
    xaxis2 = XAxis(
        title="Fahrenheits",
        overlaying= 'x', 
        side= 'top',
    ),
    yaxis=dict(
        title="Y values"
    ),
)

# Create figure with secondary x-axis
fig = go.Figure(layout=layout)

# Add traces
fig.add_trace(
    go.Scatter(x=[10, 20, 30], y=[4.5, 6, 5], name="data set in celcius"),
)

fig.add_trace(
    go.Scatter(x=[40, 60, 80], y=[4, 5, 6.5], name="data set in fahrenheit", xaxis='x2'),
)

fig.show()

这是未对齐的坐标轴导致的图形结果（10°C = 40°F !?）： 谢谢。

- ceprio

---

如果你真的想做这样的事情，我建议你使用颜色来标记x轴刻度。否则，图表将很难阅读。 - rpanai

你指定的x轴范围是否有效？ - jayveesea

Answer 1

在这种情况下，设置x轴的范围可能会有所帮助，可以像这样进行设置：

fig.add_trace(
    go.Scatter(x=[10, 20, 30], y=[4.5, 6, 5,], name="data set in celcius",xaxis="x1"),
)

fig.add_trace(
    go.Scatter(x=[40, 60, 80], y=[4, 5, 6.5], name="data set in fahrenheit", xaxis='x2'),
)


fig.update_layout(
    xaxis1=dict(range=[0, 100]),
    xaxis2=dict(range=[32, 212]),
    )

可能需要计算所需的x1极限，然后将x2极限基于此。

- jayveesea

---

这个方法是可行的，但我正在寻找一种更自动化的方式来对齐两个轴（比如指定x1和x2之间的关系的选项[x2=a*x1+b]）。此外，这个解决方案需要溢出数据才能有效地覆盖整个x范围，否则会留下未覆盖完整x范围的痕迹。 - ceprio

是的，使用这种方法需要事先做一些工作来确保你设置了适当的范围，但我认为不需要溢出（只要提前计算出最小/最大值）。 - jayveesea

Answer 2

这是我对您关注的问题的解决方案和代码。在此，我将第一和第二个x轴的范围分别设置为[0, 100]和[32, 212]。为了对齐两个轴，我为两个轴制作了26个刻度标记，并且它们是对齐的，因为刻度标记数量相等。对于两个轴具有相等数量的刻度标记（和相等的范围）非常重要，以便对齐的数字实际上是相等的。假设将绘制的大多数数据集在0到100摄氏度之间（对于摄氏度的数据）---或32到212华氏度之间（对于华氏度的数据）---我认为这个解决方案会溢出数据，而曲线不会覆盖完整的x范围。 在这里绘制图表。

import numpy as np
import plotly.graph_objects as go
arr1 = np.array([10, 20, 30])
arr2 = np.array([4.5,  6, 5])

arr3 = np.array([40, 60, 80])
arr4 = np.array([4,  5,  6.5])

fig = go.Figure(go.Scatter( x=arr1, y=arr2, name='data set in celsius' ) )
fig.add_trace(go.Scatter( x=arr3, y=arr4, xaxis='x2', name='data set in fahrenheit' ))
fig.update_layout(title_text='Double X Axis Example',
                  legend=dict(yanchor='top', y=0.875, xanchor='right', x=1),
                  yaxis=dict(domain = [0.05, 0.875], title='Y values', spikemode='toaxis', spikesnap='cursor'), template='plotly_dark', 
                  xaxis =dict(position = 0, title='Celsius', spikemode='across', spikesnap='cursor', 
                              tickmode='array', tickvals=np.linspace(0,100,26), range=[0,100]),
                  xaxis2=dict(position = 0.9, title='Fahrenheit', anchor='free', overlaying='x', side='top', tickmode='array', 
                              tickvals=np.linspace(32,212,26), range=[32,212], spikemode='across', spikesnap='cursor' ) 
                 )
fig.show()

- Numerical_Pythonista