如何在 plotly dash 应用程序中编写数学符号？答案

【问题标题】：How to write math symbols in plotly dash app?如何在 plotly dash 应用程序中编写数学符号？
【发布时间】：2020-08-12 15:16:03
【问题描述】：

我想在 plotly dash 应用中绘制数学符号。

例如，我试过这个：

import dash
import dash_html_components as html

app = dash.Dash(__name__)
app.layout = html.Div(
    children=[
        html.P(r'$ Area (m^{2}) $'),
        dcc.Markdown(r'$ Area (m^{2}) $')
    ]
)
app.run_server()

这就是结果：

我怎样才能得到这些结果？

【问题讨论】：

你读过this吗？
关于你的图片 i.stack.imgur.com/sQzVR.png ：永远不要在数学模式下写像 Area 这样的完整单词 - 这完全搞砸了字距
@rpanai 你的链接坏了

标签： python latex plotly plotly-dash

【解决方案1】：

你可以试试 Mathjax。以下工作在我的最后（Python 3.9.1，dash==1.19.0，dash-html-components==1.1.2）

首先在您当前项目的 assets 文件夹中创建一个 javascript 文件 (anyname.js)。在该文件中只有以下行：

setInterval("MathJax.Hub.Queue(['Typeset',MathJax.Hub])",1000);

然后回到你的python文件：

from dash import Dash
import dash_html_components as html

MATHJAX_CDN = '''
https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/
MathJax.js?config=TeX-MML-AM_CHTML'''

external_scripts = [
                    {'type': 'text/javascript',
                     'id': 'MathJax-script',
                     'src': MATHJAX_CDN,
                     },
                    ]


app = Dash(__name__, external_scripts=external_scripts)
app.layout = html.Div(
    children=[
        html.P('''\(Area\)(\(m^2\)) '''),
    ]
)
app.run_server()

一些注意事项：

我一直无法让 Mathjax 在 Markdown 中工作组件。
此解决方案不适用于最新的 Mathjax 版本（也不适用于 2.7.7)。我不确定它适用于哪个最新版本。

如果您能够解决这两个警告中的任何一个，请告诉我。

【讨论】：

【解决方案2】：

使用 plotly 你必须使用 unicode。例如，如果要打印希腊字母 mu 是“\u03bc”。您可以从here 获取一些符号，从here 获取上标。 m 方将是“m\U+2072”。

【讨论】：

这确实有效，点赞！不仅在情节上，而且在直接的 html.Div 中也是如此。示例：html.H1("beta is \u03b2") 虽然链接中的 unicode 对我不起作用，但谷歌“Unicode Character 'GREEK SMALL LETTER BETA”或选择的字母并删除加号并仅使用小写字母，你就在那里！谢谢。

【解决方案3】：

MathJax 3 在 Dash v2.3.0 中工作，其中包括带有 Markdown 的 Plotly.js v2.10.0。示例：dcc.Markdown('$$y=x+1$$', mathjax=True)

【讨论】：