存在数据空白时如何在 Plotly 中创建正确填充的线条

Question

Based on https://plot.ly/python/line-charts/#filled-lines , one can run the code below

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()

And successfully get the plot below

However in case there are data gaps, the filled portions do not seem to work properly (eg first and second connected component), at least with the code tried below.

What is the right way/code to successfully have data gaps and and filled lines?

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()

Answer 1

It seems to be quite an old plotly bug:

Refer to:

https://github.com/plotly/plotly.js/issues/1132

and:

https://community.plot.ly/t/scatter-line-plot-fill-option-fills-gaps/21264

One solution might be to break down your whole filling trace into multiple pieces and add them to the figure. However, this might a bit complicated, because it'd require different computation to determine the location of that filling area.

You can actually improve your chart a bit, by setting the connectgaps property to true, which result in this:

But, that looks somewhat weird ;)