Dash-关于HoverText显示问题

在用Dashboard做数据可视化时,有时候我们一种图表需要展示它所有相关的数据,比如下面的情况:

Dash-关于HoverText显示问题

当我们把数据放上去后,这个只显示了单独一条数据,我现在这个是只有安装量和占比,如果想在这个里面加入这条数据的其他数据该如何做呢?

Dash的API里面提到了HoverText,这是一个text,可以设置字符串,那么问题来了,我们可以直接把需要的字符串拼接起来,然后设置给HoverText,像这样:

Dash-关于HoverText显示问题

为什么没有换行,我在拼接的时候,是加了‘\n’的:

Dash-关于HoverText显示问题

后面发现,换行是可以的,只是这是网页,所以我换成‘</br>’就可以了

Dash-关于HoverText显示问题

嗯,不错,可以显示了!

但是这么看还不太好,我需要区分下每一行,这样可以不容易看差,于是就试了下改颜色:

Dash-关于HoverText显示问题

这样就好了~如果想突出显示哪个,也可以单独设定比较显眼的颜色,比如很重要的指标!

代码如下:

def get_pie_show():
    dft = pd.read_csv('xxxx.csv')
    arr_bar = []
    first_show_col = [
        '安装'
    ]
    for col in col_names:
        if col not in first_show_col:
            continue

        y_value = list(dft[col].values)
        cl_arr = '<span style="color:#FFFF00">安装: ' + (dft['安装'].apply(lambda v:format(v, ','))).values + '</span></br>'
        cl_arr = cl_arr + ('覆盖人数: ' + (dft['覆盖人数'].apply(lambda v:format(v, ','))).values + '</br>')
        cl_arr = cl_arr + ('<span style="color:#FFFF00">展示次数: ' + (dft['展示次数'].apply(lambda v:format(v, ','))).values + '</span></br>')
        cl_arr = cl_arr + ('点击量: ' + (dft['点击量(全部)'].apply(lambda v:format(v, ','))).values + '</br>')
        cl_arr = cl_arr + ('<span style="color:#FFFF00">花费: ' + (dft['花费金额 (USD)'].apply(lambda v:format(v, ','))).values + '</span></br>')
        cl_arr = cl_arr + ('内购收入: ' + (dft['内购收入'].apply(lambda v:format(v, ','))).values + '</br>')
        cl_arr = cl_arr + ('<span style="color:#FFFF00">广告收入: ' + (dft['广告收入'].apply(lambda v:format(v, ','))).values + '</span></br>')
        cl_arr = cl_arr + ('总收入: ' + (dft['总收入'].apply(lambda v:format(v, ','))).values + '</br>')
        cl_arr = cl_arr + ('<span style="color:#FFFF00">人均收入: ' + (dft['人均收入'].apply(lambda v:format(v, ','))).values + '</span></br>')
        cl_arr = cl_arr + ('无效用户数: ' + (dft['无效用户数'].apply(lambda v:format(v, ','))).values + '</br>')
        cl_arr = cl_arr + ('<span style="color:#FFFF00">次日留存: ' + (dft['次日留存'].apply(lambda v: f'{round(v*100, 2)}%')).values + '</span></br>')
        cl_arr = cl_arr + ('七日留存: ' + (dft['七日留存'].apply(lambda v: f'{round(v*100, 2)}%')).values + '</br>')
        cl_arr = cl_arr + ('<span style="color:#FFFF00">CPI: ' + (dft['CPI'].apply(lambda v:format(v, ','))).values + '</span></br>')
        cl_arr = cl_arr + ('CVR: ' + (dft['CVR'].apply(lambda v: f'{round(v*100, 2)}%')).values + '</br>')
        cl_arr = cl_arr + ('<span style="color:#FFFF00">CTR: ' + (dft['CTR'].apply(lambda v: f'{round(v*100, 2)}%')).values + '</span></br>')
        cl_arr = cl_arr + ('次留CPI: ' + (dft['次留CPI'].apply(lambda v: format(v, ','))).values)
        
        arr_bar.append(go.Pie(
            labels=x_col,
            values=y_value,
            title={
                'text': col,
                'font': {
                    'size': 20,
                    'color': '#FF0000'
                },
            },
            domain={
                'y': [0.2, 1] # 让图向上移动 0.2 x 600 个距离
            },
            # sort=False,
            # text=x_col,
            hovertext=list(cl_arr),
            hoverinfo='label+percent+text',
        ))
    figure = {
        'data':arr_bar,
        'layout':{
            'title': '各总和指标占比',
            'height': 600,
        },
    }
    return figure

 

上一篇:vmware 扩容 centos7


下一篇:python pdb 断点调试