Question

我正在使用Plotly-Dash，就像我的图形一样，需要文本注释的字体大小以视口宽度缩放。对于布局中的各种标题，我可以直接设置font-size: '1vw'，但是vw不是为{{的font-size属性设置style的可接受单位1}}组件。这是相关的回溯：

ValueError：对于scatter.textfont的'size'属性接收到无效的元素无效的元素包括：['1vw'，'1vw'，'1vw'，'1vw'，'1vw'，'1vw'，'1vw'，'1vw'，'1vw'，'1vw']
dcc.Graph

我认为，如果The 'size' property is a number and may be specified as: - An int or float in the interval [1, inf] - A tuple, list, or one-dimensional numpy array of the above组件可以接受视口单位（例如dcc.Graph）并将其简单地转换为浏览器端的像素，那么我应该能够使用{{ 1}}。

Python端是否有一种方法可以检索视口宽度（以像素为单位），以便我可以针对字体大小执行自己的缩放逻辑？

这里是一个示例Dash应用程序，演示了此行为：

style = {height: 30vw, width: 30vw}

Answer 1

据我了解到的情况，没有办法仅使用plotly-dash来做到这一点。实际上，您需要实现的是“响应式”排版，该主题包含一些非常有趣的文章：

https://css-tricks.com/books/volume-i/scale-typography-screen-size/
https://css-tricks.com/snippets/css/fluid-typography/
使用em个单位的字体大小：https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Ems

Dash提供了应用程序的option to override the default CSS and JS，您可以从layout documentation看到如何使用外部CSS文件。

我的建议：研究结果页面以查找文本注释如何被标记（id和/或class），并使用以上文章中提供的方法来创造令人满意的结果。（很抱歉，我实际上只能提供建议以外的其他功能，但是我没有看到您的代码示例：/）

编辑（评论和问题编辑后）：

因此，由于文本注释具有类textpoint，我们将转到override the default CSS：

创建建议的文件夹结构：
```
- app.py
- assets/
|--- typography.css
```
在typography.css上应用上述方法之一（我以第二个项目符号示例为例）：
```
.textpoint{
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
```

编辑＃2：

我发现了问题及其解决方法：

在Dash版本> = 0.22上添加自定义CSS的方法确实是上面的方法，并且有效。
为了将自定义规则应用于注释，我们需要定位的元素是text类内的.textpoint标签（CSS语法：.textpoint text）
由于某种原因，自定义CSS规则被覆盖（可能出于类似的原因，对此SO帖子的最高答案：custom css being overridden by bootstrap css进行了解释）。因此，我们需要!important的“核”选项。

利用上述内容，typography.css应该看起来像这样：

.textpoint text{
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
}

Answer 2

该错误消息表明您应该将大小作为int对象提及。如果您无法在代码中直接使用vw，请尝试使用PySide / PyQt来获取，然后将其转换为int并将其保存在另一个变量width和height下您可以插入而不是vw。

from PySide import QtGui
#replace that with "from PyQt4 import QtGui" if you're using PyQt4

app = QtGui.QApplication([])
screen_resolution = app.desktop().screenGeometry()
width = int(screen_resolution.width())
height = int(screen_resolution.height())

我不知道您正在使用什么代码，所以我没有尝试过。让我知道是否适合您。

图解图形组件不能接受视口单位来设置文本注释字体大小

2 个答案: