Plotly animation 折线图更改注释值的颜色

Question

I have a data frame 'df_vcm_set_funct_mode1' I am dding two columns to it and ploting using plotly animation chart. Please see my code below.

df_vcm_set_funct_mode1['SPEC_MIN'] = -0.01
df_vcm_set_funct_mode1['SPEC_MAX'] = 0.01
VCM_DELTA_FUN = px.line(df_vcm_set_funct_mode1, x = "Temp(deg)", y=["VCM_DELTA_10ms",'VCM_DELTA_20ms','SPEC_MIN','SPEC_MAX'],
              color = "Device_ID",animation_frame="Supply[V]",title="VCM SETTLING 10ms 20ms",markers=True)

VCM_DELTA_FUN.add_annotation(x=-40, y= -0.01,
            text="SPEC_MIN",
            showarrow=True,
            arrowhead=1)
VCM_DELTA_FUN.add_annotation(x=-40, y= 0.01,
            text="SPEC_MAX",
            showarrow=True,
            arrowhead=1)
VCM_DELTA_FUN.update_layout(xaxis_title = "Voltage",yaxis_title = "VCM_DELTA 20ms & 10ms")
VCM_DELTA_FUN.show()

When I plot the graph I am getting same color for both of the annotated things(SPEC_MIN and SPEC_MAX).Please see the graph below.

I need spec_max and Spec_min in two different colors. May I know how to do the same

Device_ID   Die_Version Temp(deg)   Supply[V]   VCM_10ms    VCM_20ms    VCM_5S  VCM_DELTA_10ms  VCM_DELTA_20ms
 FFK_571       0x81         -40           2.5       1.286      1.284       1.282   -0.003          -0.001
 SFK_619       0x81         -40           2.5       1.263      1.258       1.236   -0.027          -0.022
 TTK_538       0x81          -40          2.5       1.279      1.279       1.273   -0.006          -0.006
 FFK_TN_631    0x81          -40          2.5       1.283      1.282        1.279   -0.004         -0.003
 FFK_TN_631    0x81          -40          2.7       1.287      1.286       1.283   -0.004          -0.003

Answer 1

IIUC, we have data that looks something like this:

import pandas as pd
import numpy as np
import plotly.express as px

data = {'Device_ID':np.repeat(['A','B'],8),
        'Temp':np.tile([*range(-40,120,20)],2),
        'Supply': [2.5]*16,
        'VCM_DELTA 20ms':np.random.uniform(-0.03,0.03,16),
        'VCM_DELTA 10ms':np.random.uniform(-0.03,0.03,16)}
        
df = pd.DataFrame(data)
print(df)

   Device_ID  Temp  Supply  VCM_DELTA 20ms  VCM_DELTA 10ms
0          A   -40     2.5        0.025515       -0.009489
1          A   -20     2.5       -0.003601       -0.028498
2          A     0     2.5        0.006799        0.005940
3          A    20     2.5        0.026511        0.002165
4          A    40     2.5        0.023773       -0.021034
5          A    60     2.5       -0.017705       -0.026885
6          A    80     2.5        0.016171       -0.001522
7          A   100     2.5       -0.026219       -0.026108
8          B   -40     2.5        0.028767       -0.023051
9          B   -20     2.5       -0.004207       -0.024583
10         B     0     2.5        0.026277       -0.021089
11         B    20     2.5       -0.018630        0.010538
12         B    40     2.5        0.009662       -0.029476
13         B    60     2.5        0.006762        0.027054
14         B    80     2.5        0.005418       -0.007464
15         B   100     2.5       -0.001756       -0.019856

Plot

With SPEC_MIN (at y=-0.01 ) and SPEC_MAX (at y=0.01 ) added in different colors. We could do something like this:

fig = px.line(df, x = "Temp", y=['VCM_DELTA 20ms','VCM_DELTA 10ms'],
              color = 'Device_ID', animation_frame='Supply', markers=True)

d = {'SPEC_MIN': [-0.01,'Green'],
     'SPEC_MAX': [0.01,'Purple']}

min_temp, max_temp = df.Temp.agg(['min','max'])

for k,v in d.items():
    fig.add_shape(type='line',
                    x0=min_temp,
                    x1=max_temp,
                    y0 = v[0],
                    y1= v[0],
                    line=dict(color=v[1],dash="dash"),
    )
    fig.add_annotation(x=min_temp, y=v[0],
                text=k,
                showarrow=True,
                arrowhead=5,
                ay=-50,
                ax=-50)

fig.update_layout(xaxis_title = "Voltage", 
                  yaxis_title = "VCM_DELTA 20ms & 10ms")

fig.show()

Result

Alternatively, instead of fig.add_shape , you could also use fig.add_hline , if you don't mind the fact that these lines will cross the entire x-axis. Eg:

for k,v in d.items():
    fig.add_hline(type='line', y=v[0],
                  line=dict(color=v[1],dash="dash"),
    )
    fig.add_annotation(x=min_temp, y=v[0],
                text=k,
                showarrow=True,
                arrowhead=5,
                ay=-50,
                ax=-50)

---

NB The problem with your initial approach (adding columns SPEC_MIN and SPEC_MIN ) is that you were simply adding two lines per each ID in Device_ID . The reason why both lines are purple has to do with the fact that for each ID , you are adding the exact same lines. In the end, then, the two lines that we see are matching the color "purple" for the last unique value in Device_ID , as they overwrite the previous lines for "blue, red, green".