Компонент графика Plotly не может принимать единицы просмотра для установки размера шрифта текстовой аннотации

Question

Я использую Plotly-Dash и мне нужно, чтобы размер шрифта моих текстовых аннотаций масштабировался с шириной области просмотра, как это делают мои графики.Для различных заголовков в моем макете я могу напрямую установить font-size: '1vw', однако vw не является допустимой единицей для установки font-size для атрибута style компонента dcc.Graph.Вот связанная трассировка:

ValueError: Недопустимые элементы, полученные для свойства 'size' scatter.textfont. Недопустимые элементы включают в себя: ['1vw', '1vw', '1vw','1vw', '1vw', '1vw', '1vw', '1vw', '1vw', '1vw']

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 можетпринять единицы просмотра окна (например, style = {height: 30vw, width: 30vw}) и просто преобразовать их в пиксели на стороне браузера, тогда я смогу выполнить аналогичное преобразование с font-size.

Есть ли средства на стороне Python дляполучить ширину области просмотра в пикселях, чтобы я мог выполнить свою собственную логику масштабирования для размера шрифта?

Вот пример приложения Dash, демонстрирующего это поведение:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

labels = {'Point 1': (3.5,5), 'Point 2': (1.5,2), 'Point 3': (3.5,8)}

app = dash.Dash(__name__)

app.layout = html.Div([

    html.H1('Test', id='test', style={'margin': 50}),

    dcc.Graph(id='my-plot', style={'margin': 10}),

])

@app.callback(
    Output('my-plot', 'figure'),
    [Input('test', 'children')])
def update_graph(val):

    return {

        'data': [go.Scatter(
            x=[v[0]],
            y=[v[1]],
            text=k,
            mode='text'
        ) for k, v in labels.items()],

        'layout': go.Layout(
            margin={'l': 40, 'b': 40, 't': 40, 'r': 40},
            shapes=[
                {
                    'type': 'path',
                    'path': ' M 1 1 L 1 3 L 4 1 Z',
                    'fillcolor': 'rgba(44, 160, 101, 0.5)',
                    'line': {
                        'color': 'rgb(44, 160, 101)',
                    }
                },
                {
                    'type': 'path',
                    'path': ' M 3,7 L2,8 L2,9 L3,10, L4,10 L5,9 L5,8 L4,7 Z',
                    'fillcolor': 'rgba(255, 140, 184, 0.5)',
                    'line': {
                        'color': 'rgb(255, 140, 184)',
                    }
                },
            ]
        )
    }

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

Answer 1

В сообщении об ошибке говорится, что вы должны указать размер как 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())

Я не знаю, с каким кодом вы работаете, поэтому я не пробовал его.Дайте мне знать, если это сработает для вас.

Answer 2

Из того, что я понял, посмотрев вокруг, нет способа сделать это, используя только plotly-dash.То, что вам нужно, - это по сути «отзывчивая» типографика, тема, в которой написано несколько очень интересных статей:

• https://css -tricks.com / books / volume-i /scale-typography-screen-size /
• https://css -tricks.com / snippets / css / жидкости-типографии /
• изменение размера шрифта с использованием em единиц: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Ems

Dash предлагает опцию для переопределения CSS по умолчанию и JS приложения, и вы можете увидеть это из документации Как использовать даже внешние CSS-файлы.

Мое предложение: Исследуйте получившуюся страницу, чтобы узнать, как помечаются текстовые аннотации (id и / или class), и используйтеметоды, представленные в статьях выше, чтобы создать удовлетворительный результат.(Мне жаль, что я не могу сделать больше, чем просто предложить, но я не видел пример вашего кода: /)

---

РЕДАКТИРОВАТЬ (после редактирования комментариев и вопросов):

Так как текстовые аннотации имеют класс textpoint, мы собираемся переопределить CSS по умолчанию :

1. Создать предложенную структуру папок:

   - app.py
   - assets/
   |--- typography.css
   

2. На typography.css примените один из методов, упомянутых выше (я собираюсь на втором маркированном примере):

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

---

РЕДАКТИРОВАТЬ # 2:

Я нашел проблему и обойти ее:

• Метод добавления пользовательских CSS на DashВерсия> = 0.22 действительно выше и работает.
• Элемент, на который нам нужно ориентироваться, чтобы применить наше пользовательское правило к аннотациям, - это тег text внутри класса .textpoint (синтаксис CSS).: .textpoint text)
• По какой-то причине пользовательское правило CSS переопределяется (вероятно, по той же причине, объясненной в ответе сверху).Это сообщение SO: custom css переопределяется при загрузке css ).Таким образом, нам нужен «ядерный» параметр !important.

С учетом вышеизложенного, typography.css должен выглядеть следующим образом:

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