首页 > 其他分享> 文章详细

Dash-关于HoverText显示问题

2019-09-23 18:41:45 阅读：385 来源： 互联网

标签：arr cl dft HoverText Dash values 关于 apply lambda

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

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

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

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

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

嗯，不错，可以显示了！

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

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

代码如下：

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

标签：arr,cl,dft,HoverText,Dash,values,关于,apply,lambda
来源： https://blog.csdn.net/pz789as/article/details/101217332

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Dash-关于HoverText显示问题