如何在Plotly Dash中为范围/分类数据创建交互式条形图？

Question

我有以下数据框：

import plotly.express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import pandas as pd

cdf=pd.DataFrame({'cusid':['C1','C2','C3','C4','C5'], 'price':[20,40,25,80,90]})
labels = ["{0} - {1}".format(i, i + 20) for i in range(0, 100, 20)]
cdf['pricerange'] = pd.cut(cdf.price, range(0, 120, 20), right=False, labels=labels)

cdf
cusid   price   pricerange
C1      20      20 - 40
C2      40      40 - 60
C3      25      20 - 40
C4      80      80 - 100
C5      90      80 - 100

我想基于pricerange组以虚线方式创建条形图/ stackbar图。价格范围组将在X轴上，每个价格范围组的cusid数将在Y轴上。

当我调用@ app.callback时，它显示错误“更新图形时出现回调错误”。它说明了回调函数返回了一个类型为Figure的值 这不是JSON可序列化的。

@app.callback(Output("graph_cat", "graph"), [Input('my_input', 'value')])
def make_bar(value):
    return px.bar(cdf, x=cdf.columns[2], y=cdf.columns[0], color=cdf.columns[0], barmode="group")

如何用破折号用这种类型的数据创建条形图？