plotly.graph_objects.Bar 的单独颜色刻度

Question

我有一个 multi-index dataframe dfc，我想将其绘制为条形图，其中 yaxis 上的刻度线颜色取决于 dfc.iloc[i].values[1] 的任何值 i.

                                                           Unnamed: 1  claimed_benefit  perceived_benefit
My Burberry - Eau de Parfum                           je me sens bien                0           0.000000
Her Intense - Eau de Parfum                         convient bien moi                0           0.000000
Her Intense - Eau de Parfum                          sensuelle / sexy                0           0.000000
Her Intense - Eau de Parfum                                  nettoyer                0           0.000000
Her Intense - Eau de Parfum                             haute qualite                0           0.000000
...                                                               ...              ...                ...
Mr. Burberry Indigo - Eau de Toilette  nouveau / jamais respire avant                0           0.666667

为了实现这一点，我尝试通过更新布局中 yaxis 属性的 ticktext 值，因为 plotly 似乎具有完整的 LaTeX支持。

traces = []
ticks = []
colors = []
for i in range(len(dfc)):
    if dfc.iloc[i].name == my_dropdown:
        trace_claimed = go.Bar(y=[dfc.iloc[i].values[0]], x=[dfc.iloc[i].values[2]],
                               name=dfc.iloc[i].values[0] + ' Perceived', orientation='h')

        tick = dfc.iloc[i].values[0]

        if dfc.iloc[i].values[1] > 0:
            color = 'red'
        else:
            color = 'blue'

        ticks.append(tick)
        colors.append(color)
        traces.append(trace_claimed)
            # traces.append(trace_perceived)

keys = dict(zip(ticks, colors))
ticktext = [get_color(v, k) for k, v in keys.items()]


figure = go.Figure(data=traces,
                   layout=go.Layout(title='Score des parfums sur les attributs',
                                    barmode='stack')
                   )

figure.update_layout(
    yaxis=dict(tickmode='array', ticktext=ticktext, tickvals=ticks)
)

但是它只为刻度生成一个奇怪的文本：

这是 ticktext 值：

['$\color{blue}{je me sens bien}$', '$\color{blue}{harsh / agressif}$', '$\color{blue}{boisé}$', '$\color{blue}{écœurant}$', '$\color{blue}{strength1}$', ..., '$\color{red}{frais}$', '$\color{blue}{pour le soir / nuit}$', '$\color{blue}{doux}$']

这是一个最小的可重现示例：

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
from os.path import abspath, dirname, join

app = Dash(__name__)


def get_color(color, text):
    s = '$\color{' + str(color) + '}{' + str(text) + '}$'
    return s


df = pd.read_csv('some_file.csv')


def layout():
    return html.Div([
        dcc.Dropdown(
            id='perfume-dropdown',
            options=[{'label': x, 'value': x} for x in df.index.unique()],
            value='My Burberry - Eau de Parfum'
        ),
        html.Div(id='dd-output-container'),
        html.Div([
            dcc.Graph(id='graph-attributes')
        ])
    ])

@app.callback(
    Output(component_id='graph-attributes', component_property='figure'),
    [Input(component_id="perfume-dropdown", component_property="value")]
)
def update_graph(my_dropdown):
    dfc = df.sort_values(by='perceived_benefit', ascending=True)
    traces = []
    ticks = []
    colors = []
    for i in range(len(dfc)):
        if dfc.iloc[i].name == my_dropdown:
            trace_claimed = go.Bar(y=[dfc.iloc[i].values[0]], x=[dfc.iloc[i].values[2]],
                                   name=dfc.iloc[i].values[0] + ' Perceived', orientation='h')

            tick = dfc.iloc[i].values[0]

            if dfc.iloc[i].values[1] > 0:
                color = 'red'
            else:
                color = 'blue'

            ticks.append(tick)
            colors.append(color)
            traces.append(trace_claimed)
                # traces.append(trace_perceived)

    keys = dict(zip(ticks, colors))
    ticktext = [get_color(v, k) for k, v in keys.items()]

    print(ticktext)

    figure = go.Figure(data=traces,
                       layout=go.Layout(title='Score des parfums sur les attributs',
                                        barmode='stack')
                       )

    figure.update_layout(
        yaxis=dict(tickmode='array', ticktext=ticktext, tickvals=ticks)
    )

    return figure

Answer 1

将 here 中的方法与您的代码一起使用，以及以下 some_file.csv：

name,claimed,perceived
A,0,1
B,1,2
C,0,3
D,1,4

我们可以实现这个（用我的例子）：

通过添加两件事：

pip install dash_defer_js_import

和

import dash_defer_js_import as dji
mathjax_script = dji.Import(src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-AMS-MML_SVG")

[...]

def layout():
    return html.Div([
        dcc.Dropdown(
            id='perfume-dropdown',
            options=[{'label': x, 'value': x} for x in df.index.unique()],
            value='My Burberry - Eau de Parfum'
        ),
        html.Div(id='dd-output-container'),
        html.Div([
            dcc.Graph(id='graph-attributes')
        ]),
        mathjax_script # use the script here
    ])

总而言之：

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
from os.path import abspath, dirname, join
from dash import Dash

app = Dash(__name__)

import dash_defer_js_import as dji
mathjax_script = dji.Import(src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-AMS-MML_SVG")

def get_color(color, text):
    s = '$\color{' + str(color) + '}{' + str(text) + '}$'
    return s


df = pd.read_csv('some_file.csv')


def layout():
    return html.Div([
        dcc.Dropdown(
            id='perfume-dropdown',
            options=[{'label': x, 'value': x} for x in df.index.unique()],
            value='My Burberry - Eau de Parfum'
        ),
        html.Div(id='dd-output-container'),
        html.Div([
            dcc.Graph(id='graph-attributes')
        ]),
        mathjax_script
    ])


@app.callback(
    Output(component_id='graph-attributes', component_property='figure'),
    [Input(component_id="perfume-dropdown", component_property="value")]
)
def update_graph(my_dropdown):
    dfc = df.sort_values(by='perceived', ascending=True)
    traces = []
    ticks = []
    colors = []
    for i in range(len(dfc)):
        if dfc.iloc[i].name == my_dropdown:
            trace_claimed = go.Bar(y=[dfc.iloc[i].values[0]], x=[dfc.iloc[i].values[2]],
                                   name=dfc.iloc[i].values[0] + ' Perceived', orientation='h')

            tick = dfc.iloc[i].values[0]

            if dfc.iloc[i].values[1] > 0:
                color = 'red'
            else:
                color = 'blue'

            ticks.append(tick)
            colors.append(color)
            traces.append(trace_claimed)
            # traces.append(trace_perceived)

    keys = dict(zip(ticks, colors))
    ticktext = [get_color(v, k) for k, v in keys.items()]

    print(ticktext)

    figure = go.Figure(data=traces,
                       layout=go.Layout(title='Score des parfums sur les attributs',
                                        barmode='stack')
                       )

    figure.update_layout(
        yaxis=dict(tickmode='array', ticktext=ticktext, tickvals=ticks)
    )

    return figure


if __name__ == '__main__':
    app.layout = layout()
    app.run_server(debug=True)

没有下拉菜单的图片：

plotly.graph_objects.Bar 的单独颜色刻度

Individually color ticks of a plotly.graph_objects.Bar

colors

ticker

bar-chart

python-3.x

plotly