存在数据间隙时如何在 Plotly 中创建正确填充的行
How to create properly filled lines in Plotly when there are data gaps
基于https://plot.ly/python/line-charts/#filled-lines,可以运行下面的代码
import plotly.graph_objects as go
x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
x_rev = x[::-1]
y = [5, 2.5, 5, 7.5, 5, 2.5, 7.5, 4.5, 5.5, 5]
y_upper = [5.5, 3, 5.5, 8, 6, 3, 8, 5, 6, 5.5]
y_lower = [4.5, 2, 4.4, 7, 4, 2, 7, 4, 5, 4.75]
y_lower_rev = y_lower[::-1]
fig = go.Figure()
fig.add_trace(go.Scatter(
x=x, y=y,
line_color='rgb(0,176,246)',
name='Mid line',
))
fig.add_trace(go.Scatter(
x=x+x_rev,
y=y_upper+y_lower_rev,
fill='toself',
fillcolor='rgba(0,176,246,0.2)',
line_color='rgba(255,255,255,0)',
name='Filled lines working properly',
))
fig.update_traces(mode='lines')
fig.show()
并成功得到下图
然而,如果存在数据间隙,填充部分似乎无法正常工作(例如,第一个和第二个连接的组件),至少在下面尝试的代码中是这样。
什么是正确的 way/code 来成功地具有数据间隙和填充线?
x_for_gaps_example = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
x_for_gaps_example_rev = x_for_gaps_example[::-1]
y_with_gaps =[5, 15, None, 10, 5, 0, 10, None, 15, 5, 5, 10, 20, 15, 5]
y_upper_with_gaps = [i+1 if i is not None else None for i in y_with_gaps]
y_lower_with_gaps = [i-2 if i is not None else None for i in y_with_gaps][::-1]
fig = go.Figure()
fig.add_trace(go.Scatter(
x=x_for_gaps_example,
y=y_with_gaps,
name='Mid Line with <b>Gaps</b>'
))
fig.add_trace(go.Scatter(
x=x_for_gaps_example+x_for_gaps_example_rev,
y=y_upper_with_gaps+y_lower_with_gaps,
fill='toself',
fillcolor='rgba(0,176,246,0.2)',
line_color='rgba(255,255,255,0)',
name='Filled Lines not working properly with <b>gaps</b>'
))
fig.show()
这似乎是一个相当古老的情节错误:
参考:
https://github.com/plotly/plotly.js/issues/1132
和:
https://community.plot.ly/t/scatter-line-plot-fill-option-fills-gaps/21264
一个解决方案可能是将整个填充轨迹分解成多个部分并将它们添加到图中。然而,这可能有点复杂,因为它需要不同的计算来确定该填充区域的位置。
实际上,您可以通过将 connectgaps 属性 设置为 true 来稍微改进您的图表,结果如下:
但是,这看起来有点奇怪 ;)
基于https://plot.ly/python/line-charts/#filled-lines,可以运行下面的代码
import plotly.graph_objects as go
x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
x_rev = x[::-1]
y = [5, 2.5, 5, 7.5, 5, 2.5, 7.5, 4.5, 5.5, 5]
y_upper = [5.5, 3, 5.5, 8, 6, 3, 8, 5, 6, 5.5]
y_lower = [4.5, 2, 4.4, 7, 4, 2, 7, 4, 5, 4.75]
y_lower_rev = y_lower[::-1]
fig = go.Figure()
fig.add_trace(go.Scatter(
x=x, y=y,
line_color='rgb(0,176,246)',
name='Mid line',
))
fig.add_trace(go.Scatter(
x=x+x_rev,
y=y_upper+y_lower_rev,
fill='toself',
fillcolor='rgba(0,176,246,0.2)',
line_color='rgba(255,255,255,0)',
name='Filled lines working properly',
))
fig.update_traces(mode='lines')
fig.show()
并成功得到下图
然而,如果存在数据间隙,填充部分似乎无法正常工作(例如,第一个和第二个连接的组件),至少在下面尝试的代码中是这样。
什么是正确的 way/code 来成功地具有数据间隙和填充线?
x_for_gaps_example = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
x_for_gaps_example_rev = x_for_gaps_example[::-1]
y_with_gaps =[5, 15, None, 10, 5, 0, 10, None, 15, 5, 5, 10, 20, 15, 5]
y_upper_with_gaps = [i+1 if i is not None else None for i in y_with_gaps]
y_lower_with_gaps = [i-2 if i is not None else None for i in y_with_gaps][::-1]
fig = go.Figure()
fig.add_trace(go.Scatter(
x=x_for_gaps_example,
y=y_with_gaps,
name='Mid Line with <b>Gaps</b>'
))
fig.add_trace(go.Scatter(
x=x_for_gaps_example+x_for_gaps_example_rev,
y=y_upper_with_gaps+y_lower_with_gaps,
fill='toself',
fillcolor='rgba(0,176,246,0.2)',
line_color='rgba(255,255,255,0)',
name='Filled Lines not working properly with <b>gaps</b>'
))
fig.show()
这似乎是一个相当古老的情节错误:
参考:
https://github.com/plotly/plotly.js/issues/1132
和:
https://community.plot.ly/t/scatter-line-plot-fill-option-fills-gaps/21264
一个解决方案可能是将整个填充轨迹分解成多个部分并将它们添加到图中。然而,这可能有点复杂,因为它需要不同的计算来确定该填充区域的位置。
实际上,您可以通过将 connectgaps 属性 设置为 true 来稍微改进您的图表,结果如下:
但是,这看起来有点奇怪 ;)