绘制：用两个不线性相关的x轴绘制一条迹线

gopher 发表于 Dev

地鼠

问题

我试图绘制可以表示为吸光度与波长（nm）或吸光度与波数（cm -1）的数据。注意转换是cm -1 ＝ 10 -1 / nm。

我希望绘制一条带有一个y轴（“吸光度”）和两个x轴（“波长（nm）”和“波长（cm -1”））的迹线。

目前，我的计划是绘制两条迹线，但保持一条不可见。但是，我不明白如何实现辅助X轴。另外，是否有一种方法可以正确缩放Wavenumber轴，以使可见图和不可见图彼此重叠？

样本数据和起始代码

import pandas as pd
import plotly.graph_objects as go

data = pd.DataFrame[{'Wavelength' = {100, 200, 300, 400, 500, 600, 700, 800, 900, 1000}
                     'Absorbance' = {1.00, 1.01, 1.02, 1.03, 1.04, 1.05, 1.04, 1.03, 1.02, 1.01}
                     }]

def nm_convert(nm):
    wavenumber = 10000000/nm
    return wavenumber

data['Wavenumber'] = nm_convert(data['Wavelength'])

trace1 = go.Scatter(x=dataset['Wavelength'], y=dataset['Absorbance'], mode='lines', line=dict(width=1.5), name='nm_trace')
trace2 = go.Scatter(x=dataset['Wavenumber'], y=dataset['Absorbance'], name='cm-1 trace', visible=False)

范例图片

我已经举例说明了可能要寻找的结果。但是，我愿意接受其他建议。

日惹

这里有几个问题，我相信@vestland已经回答了主要问题。但是要扩展他的答案并解决您的第二个问题，您可以结合使用tickvals和ticktext实现第二个轴的“缩放”，这是这里的另一个示例。

以下是从《战地》的作品改编而成的示例，并附有以下评论

这里有两个系列，第二个未显示 opacity=0
为xaxis2的tickvals是Wavelength，但ticktext被设置为Wavenumber（四舍五入也有round）
在第一个系列上使用customdata和hovertemplate提供统一的悬停

import pandas as pd
import plotly.graph_objects as go

data = pd.DataFrame({'Wavelength' : [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
                     'Absorbance' : [1.00,1.01,1.02,1.03,1.04,1.05,1.04,1.03,1.02,1.01]})
data['Wavenumber'] = 10000000/data['Wavelength']

fig = go.Figure()
fig.add_traces(go.Scatter(x=data['Wavelength'], 
                          y=data['Absorbance'],
                          customdata=data['Wavenumber'],
                          showlegend=False,
                          hovertemplate=
                            "Wavelength: %{x}<br>" +
                            "Wavenumber: %{customdata:.0f}<br>" +
                            "Absorbance: %{y}" +
                            "<extra></extra>",))
fig.add_traces(go.Scatter(x=data['Wavelength'], 
                          y=data['Absorbance'], 
                          showlegend=False, 
                          opacity=0, 
                          hoverinfo='skip',
                          xaxis="x2"))

fig.update_layout(xaxis= {'title':'Wavelength','showgrid':False,})
fig.update_layout(yaxis= {'title':'Absorbance','showgrid':False,})
fig.update_layout(xaxis2= {'title':'Wavenumber', 'showgrid':False,
                           'anchor': 'y', 
                           'overlaying': 'x', 
                           'side': 'top',
                           'tickvals':data['Wavelength'],
                           'ticktext':data['Wavenumber'].round(decimals=-2)})
fig.show()