python - 在 Dash DataTable 中插入形状

Question

我在破折号中有以下数据表。生成此表的代码如下：

import dash
import dash_table
import pandas as pd

data = {'value':['very low','low','medium','high','very high'],'data':[1,3,5,7,10]}
df = pd.DataFrame(data)


app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict('records'),
)

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

但我想生成下表。我如何使用破折号来做到这一点？指示列是一种基于比例进行颜色编码的形状（例如，5 是中等值，因此yellow/amber，高于 5 的值从green到dark green。类似地，低于 5 的值从amber到red

标签： pythonpandasdatatablesplotly-dash

Answer 1

感谢 Eduardo 在 plotly 社区论坛上，我了解到我们现在可以将 html 内容用于DataTable（plotly 论坛线程，github pull request）的 Markdown 单元格。

这允许我们做这样的事情：

import dash
import dash_html_components as html
import dash_table
import pandas as pd


def get_svg_arrow(val):
    if val > 7:
        fill = "green"
    elif val > 5:
        fill = "blue"
    elif val == 5:
        fill = "yellow"
    elif val >= 3:
        fill = "orange"
    else:
        fill = "red"

    if val >= 5:
        path = f'<path d="M19.5 11L26 11L13 -1.1365e-06L7.97623e-09 11L6.5 11L6.5 22L19.5 22L19.5 11Z" fill="{fill}"/>'
    else:
        path = (
            f'<path d="M6.5 11H0L13 22L26 11L19.5 11V0L6.5 0L6.5 11Z" fill="{fill}"/>'
        )

    return f'<svg width="26" height="22" viewBox="0 0 26 22" fill="none" xmlns="http://www.w3.org/2000/svg">{path}</svg>'


values = [1, 3, 5, 7, 10]
data = {
    "value": ["very low", "low", "medium", "high", "very high"],
    "indicator": [get_svg_arrow(val) for val in values],
    "data": values,
}

df = pd.DataFrame(data)

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dash_table.DataTable(
            css=[dict(selector="p", rule="margin: 0px; text-align: center")],
            data=df.to_dict("records"),
            style_cell={"textAlign": "center"},
            columns=[
                {"name": col, "id": col, "presentation": "markdown"}
                if col == "indicator"
                else {"name": col, "id": col}
                for col in df.columns
            ],
            markdown_options={"html": True},
        )
    ]
)

if __name__ == "__main__":
    app.run_server()

所以上面代码的想法是根据数据动态创建一个带有填充颜色的箭头svg。

为了创建 svg 箭头，我使用了矢量绘图程序并导出为 svg，但如果您愿意，您可以手动构建路径。

结果