2 планировка: Рейтинг дурацких планировок 2. Семейные квартиры

Часть 2. Макет | Документация Dash для Python

Это вторая глава учебника Dash.
В предыдущей главе была рассмотрена установка
, а в следующей главе рассматриваются обратные вызовы Dash.

 # Запустите это приложение с помощью `python app.py` и
# посетите http://127.0.0.1:8050/ в веб-браузере.
импорт из тире Dash, html, dcc
импортировать plotly.express как px
импортировать панд как pd
приложение = Тире (__имя__)
# предположим, что у вас есть "длинный" фрейм данных
# см. https://plotly.com/python/px-arguments/ для получения дополнительных параметров
df = pd.DataFrame({
    «Фрукты»: [«Яблоки», «Апельсины», «Бананы», «Яблоки», «Апельсины», «Бананы»],
    «Сумма»: [4, 1, 2, 2, 4, 5],
    «Город»: [«СФ», «СФ», «СФ», «Монреаль», «Монреаль», «Монреаль»]
})
fig = px.bar(df, x="Фрукты", y="Количество", color="Город", barmode="группа")
app. layout = html.Div (дети = [
    html.h2(дети='Привет Дэш'),
    html.Div (дети = '''
        Dash: платформа веб-приложений для ваших данных.
    '''),
    dcc.График(
       ,
        фигура = рис
    )
])
если __name__ == '__main__':
    app.run_server(отладка=Истина)
 

Dash: платформа веб-приложений для ваших данных.

 $ питон app.py
... Работает на http://127.0.0.1:8050/ (для выхода нажмите CTRL+C)
 

Посетите http://127.0.0.1:8050/
в веб-браузере. Вы должны увидеть приложение, похожее на приведенное выше.

Примечание:

1. Макет состоит из дерева «компонентов», таких как
   html.Div
   и dcc.Graph .

2. Модуль HTML-компонентов Dash ( dash.html )

   имеет компонент для каждого тега HTML.
   Компонент html.h2(children='Hello Dash')
   создает элемент <h2>Hello Dash<h2> HTML-элемент в вашем приложении.
   3. Не все компоненты представляют собой чистый HTML.
   Модуль Dash Core Components ( dash.dcc )
   содержит компоненты более высокого уровня, которые являются интерактивными и создаются с помощью
   JavaScript, HTML и CSS через библиотеку React.js.

3. Каждый компонент полностью описывается с помощью ключевых слов.
   Dash — это декларативный : вы в первую очередь будете описывать свое приложение
   с помощью этих атрибутов.

4. Свойство детей является особенным. По соглашению это всегда первый атрибут, что означает, что его можно опустить: html.h2(children='Hello Dash') совпадает с html.h2('Hello Dash') . Он может содержать строку, число, один компонент или список компонентов.
5. Шрифты в вашем приложении будут выглядеть немного иначе, чем здесь.
   Это приложение использует пользовательскую таблицу стилей CSS и Dash Enterprise Design Kit
   для изменения стилей элементов по умолчанию. Вы можете узнать больше о пользовательском CSS в учебнике по CSS
   .

Внесение первого изменения

Dash включает «горячую перезагрузку», эта функция активируется по умолчанию,
когда вы запускаете приложение с app.run_server(debug=True) .
Это означает, что Dash
автоматически обновит ваш браузер, когда вы внесете изменения в свой код.

Попробуйте: измените заголовок «Hello Dash» в своем приложении или измените данные
x или y . Ваше приложение должно автоматически обновляться с вашим изменением.

Не нравится горячая перезагрузка? Вы можете отключить это с помощью app.run_server(dev_tools_hot_reload=False) .
Подробнее см. в документации Dash Dev Tools
Вопросы? См. обсуждение горячей перезагрузки на форуме сообщества.

Подробнее о компонентах HTML

Компоненты Dash HTML ( dash.html )
содержит класс компонента для каждого тега HTML, а также аргументы ключевого слова для всех аргументов HTML.

Давайте настроим текст в нашем приложении, изменив встроенные стили компонентов.
Создайте файл с именем app.py со следующим кодом:

 # Запустите это приложение с помощью `python app.py` и
# посетите http://127.0.0.1:8050/ в веб-браузере.
импорт из тире Dash, dcc, html
импортировать plotly.express как px
импортировать панд как pd
приложение = Тире (__имя__)
цвета = {
    «фон»: «# 111111»,
    'текст': '#7FDBFF'
}
# предположим, что у вас есть "длинный" фрейм данных
# см. https://plotly.com/python/px-arguments/ для получения дополнительных параметров
df = pd.DataFrame({
    «Фрукты»: [«Яблоки», «Апельсины», «Бананы», «Яблоки», «Апельсины», «Бананы»],
    «Сумма»: [4, 1, 2, 2, 4, 5],
    «Город»: [«СФ», «СФ», «СФ», «Монреаль», «Монреаль», «Монреаль»]
})
fig = px.bar(df, x="Фрукты", y="Количество", color="Город", barmode="группа")
fig.update_layout(
    plot_bgcolor = цвета ['фон'],
    paper_bgcolor = цвета ['фон'],
    font_color = цвета ['текст']
)
app. layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    html.h2(
        дети = 'Привет, Дэш',
        стиль = {
            'текстовое выравнивание': 'центр',
            'цвет': цвета['текст']
        }
    ),
    html.Div(children='Dash: платформа веб-приложений для ваших данных.', style={
        'текстовое выравнивание': 'центр',
        'цвет': цвета['текст']
    }),
    dcc.График(
       ,
        фигура = рис
    )
])
если __name__ == '__main__':
    app.run_server(отладка=Истина)
 

Dash: платформа веб-приложений для ваших данных.

В этом примере мы изменили встроенные стили компонентов
html.Div
и html.h2 с помощью свойства style .

 html.h2('Hello Dash', style={'textAlign': 'center', 'color': '#7FDBFF'})
 

Приведенный выше код отображается в приложении Dash как
<h2>Hello Dash<h2> .

Есть несколько важных различий между dash. html
и атрибуты HTML:

1. Свойство стиля в HTML представляет собой строку, разделенную точкой с запятой. В Dash,
вы можете просто поставить словарь.
2. Ключи в словаре в стиле имеют верблюжий регистр.
Итак, вместо text-align это textAlign .
3. Атрибут класса HTML — это className в Dash.
4. Дочерний элемент HTML-тега указывается через дети ключевое слово
аргумент. По соглашению это всегда первый аргумент , поэтому его часто опускают.

Кроме того, все доступные атрибуты и теги HTML
доступны вам в вашем контексте Python.

Повторно используемые компоненты

Написав нашу разметку на Python, мы можем создавать сложные повторно используемые компоненты, такие как таблицы, без переключения контекстов или языков.

Вот быстрый пример, который генерирует Таблица из кадра данных
Pandas. Создайте файл с именем app.py со следующим кодом:

 # Запустите это приложение с помощью `python app.py` и
# посетите http://127.0.0.1:8050/ в веб-браузере.
из тире импортировать тире, html
импортировать панд как pd
df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/c78bf172206ce24f77d6363a2d754b59/raw/c353e8ef842413cae56ae3920b8fd78468aa4cb2/usa-agricultural-exports-2011.csv')
def generate_table (кадр данных, max_rows = 10):
    вернуть html.Таблица([
        html.Thead(
            html.Tr([html.Th(col) для столбца в dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) для столбца в dataframe.columns
            ]) для i в диапазоне (min (len (dataframe), max_rows))
        ])
    ])
приложение = Тире (__имя__)
app.layout = html.Div([
    html.h5(children='Экспорт сельского хозяйства США (2011)'),
    сгенерировать_таблицу (df)
])
если __name__ == '__main__':
    app. run_server(отладка=Истина)
 

Экспорт сельскохозяйственной продукции США (2011 г.)

Без имени: 0	состояние	всего экспорта	говядина	свинина	домашняя птица	молочные продукты	фрукты свежие	фруктов процесс	фруктов	овощи свежие	овощи процесс	овощей	кукуруза	пшеница	хлопок
	Алабама	1390,63	34,4	10,6	481,0	4,06	8.0	17.1	25.11	5,5	8,9	14.33	34,9	70. 0	317,61
1	Аляска	13.31	0,2	0,1		0,19				0,6	1,0	1,56
2	Аризона	1463,17	71,3	17,9		105,48	19,3	41,0	60,27	147,5	239,4	386,91	7,3	48,7	423,95
3	Арканзас	3586.02	53,2	29,4	562,9	3,53	2. 2	4,7	6,88	4.4	7.1	11.45	69,5	114,5	665,44
4	Калифорния	16472,88	228,7	11.1	225,4	929,95	2791,8	5944,6	8736.4	803.2	1303,5	2106,79	34,6	249,3	1064,95
5	Колорадо	1851,33	261,4	66,0	14,0	71,94	5,7	12.2	17,99	45,1	73,2	118,27	183,2	400,5
6	Коннектикут	259,62	1. 1	0,1	6,9	9,49	4.2	8,9	13.1	4.3	6,9	11.16
7	Делавэр	282,19	0,4	0,6	114,7	2.3	0,5	1,0	1,53	7.6	12,4	20.03	26,9	22,9
8	Флорида	3764,09	42,6	0,9	56,9	66,31	438,2	933.1	1371,36	171,9	279,0	450,86	3,5	1,8	78,24
9	Грузия	2860,84	31,0	18,9	630,4	38,38	74,6	158,9	233,51	59,0	95,8	154,77	57,8	65,4	1154. 07

Подробнее о визуализации

Модуль Dash Core Components
( dash.dcc ) включает компонент
Graph .

Graph
визуализирует интерактивные данные с использованием открытой библиотеки
plotly.js JavaScript graphing
. Plotly.js поддерживает более 35 типов диаграмм и отображает диаграммы в формате
как в векторном качестве SVG, так и в высокопроизводительном WebGL.

Аргумент фигура в компоненте Graph
— это тот же аргумент цифра , который используется plotly.py , графической библиотекой Python Plotly
с открытым исходным кодом.
Ознакомьтесь с документацией plotly.py и галереей
, чтобы узнать больше.

Вот пример создания точечной диаграммы из кадра данных
Pandas. Создайте файл с именем app.py со следующим кодом:

 # Запустите это приложение с помощью `python app. py` и
# посетите http://127.0.0.1:8050/ в веб-браузере.
импорт из тире Dash, dcc, html
импортировать plotly.express как px
импортировать панд как pd
приложение = Тире (__имя__)
df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/5d1ea79569ed194d432e56108a04d188/raw/a9f9e8076b837d541398e999dcbac2b2826a81f8/gdp-life-exp-2007.csv')
рис = px.scatter(df, x="ВВП на душу населения", y="продолжительность жизни",
                 размер = "население", цвет = "континент", hover_name = "страна",
                 log_x = Истина, size_max = 60)
app.layout = html.Div([
    dcc.График(
       ,
        фигура = рис
    )
])
если __name__ == '__main__':
    app.run_server(отладка=Истина)
 

Эти графики являются интерактивными и адаптивными.
Наведение над точками, чтобы увидеть их значения,
щелкните на элементах легенды, чтобы переключить кривые,
щелкните и перетащите , чтобы увеличить масштаб,
, удерживая клавишу Shift, и щелкните и перетащите 4, чтобы панорамировать.

Markdown

Хотя Dash предоставляет HTML через HTML-компоненты Dash ( dash.html ), писать свою копию в HTML может быть утомительно. Для написания блоков текста можно использовать компонент
Markdown в
Основные компоненты Dash ( dash.dcc ). Создайте файл с именем app.py со следующим кодом:

 # Запустите это приложение с помощью `python app.py` и
# посетите http://127.0.0.1:8050/ в веб-браузере.
импорт из тире Dash, html, dcc
приложение = Тире (__имя__)
markdown_text = '''
### Тире и уценка
Приложения Dash можно писать в Markdown.
Dash использует [CommonMark](http://commonmark.org/)
Спецификация уценки.
Ознакомьтесь с их [60 Second Markdown Tutorial](http://commonmark.org/help/)
если это ваше первое знакомство с Markdown!
'''
app.layout = html.Div([
    dcc.Markdown (дети = markdown_text)
])
если __name__ == '__main__':
    app.run_server(отладка=Истина)
 

Dash и Markdown

Приложения Dash можно писать в Markdown.
Dash использует спецификацию CommonMark
Markdown.
Ознакомьтесь с их 60-секундным учебным пособием по уценке
, если это ваше первое знакомство с уценкой!

Основные компоненты

Основные компоненты Dash ( dash.dcc )
включает набор компонентов более высокого уровня, таких как раскрывающиеся списки, графики, блоки уценки и многое другое.

Как и все компоненты Dash, они описываются полностью декларативно.
Каждый настраиваемый параметр доступен в качестве ключевого аргумента
компонента.

Мы увидим многие из этих компонентов на протяжении всего руководства.
Вы можете просмотреть все доступные компоненты в обзоре
Dash Core Components.

Вот некоторые из доступных компонентов.
Создайте файл с именем app.py со следующим кодом:

 # Запустите это приложение с помощью `python app.py` и
# посетите http://127.0.0.1:8050/ в веб-браузере. 
импорт из тире Dash, html, dcc
приложение = Тире (__имя__)
app.layout = html.Div([
    html.Div (дети = [
        html.Ярлык('Выпадающий список'),
        dcc.Dropdown(['Нью-Йорк', 'Монреаль', 'Сан-Франциско'], 'Монреаль'),
        html.Бр(),
        html.Label('Раскрывающийся список с множественным выбором'),
        dcc.Dropdown(['Нью-Йорк', 'Монреаль', 'Сан-Франциско'],
                     ['Монреаль', 'Сан-Франциско'],
                     мульти = Истина),
        html.Бр(),
        html.Label('Радиоэлементы'),
        dcc.RadioItems(['Нью-Йорк', 'Монреаль', 'Сан-Франциско'], 'Монреаль'),
    ], style={'padding': 10, 'flex': 1}),
    html.Div (дети = [
        html.Label('Флажки'),
        dcc.Checklist(['Нью-Йорк', 'Монреаль', 'Сан-Франциско'],
                      ['Монреаль', 'Сан-Франциско']
        ),
        html.Бр(),
        html.Label('Ввод текста'),
        dcc.Input (значение = 'MTL', тип = 'текст'),
        html.Бр(),
        html.Label('Слайдер'),
        dcc.Slider(
            мин=0,
            макс=9,
            mark={i: f'Label {i}' if i == 1 else str(i) для i в диапазоне (1, 6)},
            значение=5,
        ),
    ], style={'padding': 10, 'flex': 1})
], style={'display': 'flex', 'flex-direction': 'row'})
если __name__ == '__main__':
    app. run_server(отладка=Истина)
 

Раскрывающийся список

Раскрывающийся список множественного выбора

Радиоэлементы

Флажки

Ввод текста

Слайдер

Справка

Компоненты Dash являются декларативными: каждый настраиваемый аспект этих 9Компоненты 0004 устанавливаются во время создания экземпляра в качестве аргумента ключевого слова.

Вызовите помощь в консоли Python на любом из компонентов, чтобы
узнать больше о компоненте и его доступных аргументах.

 >>> справка(dcc.Dropdown)
Раскрывающийся список классов (dash.development.base_component.Component)
| Компонент раскрывающегося списка.
| Выпадающий список — это интерактивный выпадающий элемент для выбора одного или нескольких
| Предметы.
| Значения и метки выпадающих элементов указаны в «параметрах». 
| свойство и выбранный элемент(ы) указываются с помощью свойства `value`.
|
| Используйте раскрывающийся список, когда у вас есть много вариантов (более 5) или когда вы
| ограничено пространством. В противном случае вы можете использовать RadioItems или контрольный список,
| которые имеют преимущество показа пользователям всех элементов одновременно.
|
| Аргументы ключевых слов:
| - идентификатор (строка; необязательный)
| - className (строка; необязательно)
| - disabled (логическое; необязательный): если true, опция отключена.
| - multi (логическое; необязательный): если true, пользователь может выбрать несколько значений.
| - варианты (список; необязательный)
| - заполнитель (строка; необязательный): серый текст по умолчанию, отображаемый, когда не выбран ни один параметр.
| - значение (строка | список; необязательно): значение ввода. Если `multi` равно false (по умолчанию)
| тогда значение - это просто строка, соответствующая значениям
| предоставляется в свойстве `options`. Если `мульти` верно, то
| несколько значений могут быть выбраны одновременно, и `значение`
| массив элементов со значениями, соответствующими тем, что в
| `options` реквизит. 
 

Сводка

Макет приложения Dash описывает, как выглядит приложение.
Макет представляет собой иерархическое дерево компонентов. Компоненты HTML

Dash ( dash.html ) предоставляют классы для всех тегов HTML
, а аргументы ключевого слова описывают атрибуты HTML, такие как style , class и id . Основные компоненты Dash ( dash.dcc ) создают компоненты более высокого уровня, такие как элементы управления и графики.

Для справки см.:

• Обзор основных компонентов Dash
• Обзор HTML-компонентов Dash

В следующей части руководства по Dash рассказывается, как сделать эти приложения интерактивными.
Учебное пособие по Dash, часть 3. Основные обратные вызовы

Как создать макет с двумя столбцами

❮ Предыдущий Далее ❯

Узнайте, как создать двухколоночную сетку макета с помощью CSS.

Столбец 1

Некоторый текст..

Столбец 2

Немного текста..

Попробуйте сами »

Как создать двухколоночный макет

Шаг 1) Добавьте HTML:

Пример

Шаг 2) Добавьте CSS:

В этом примере мы создадим два равных столбца:

Пример с плавающей запятой

.столбец {
плыть налево;
  ширина: 50 %;
}

/* Очистить поплавки после столбцы */
.row:after {
  content: "";
дисплей: таблица;
  очистить: оба;
}

Попробуйте сами »

Современный способ создания двух столбцов — использование CSS Flexbox. Однако он не поддерживается в Internet Explorer 10 и более ранних версиях.

Пример Flex

.строка {
дисплей: гибкий;
}

. column {
  flex: 50%;
}

Попробуйте сами »

Вам решать, хотите ли вы использовать float или flex для создания двухколоночного макета. Однако, если вам нужна поддержка IE10 и более ранних версий, вам следует использовать float.

Подсказка: Чтобы узнать больше о модуле Flexible Box Layout, прочтите нашу Глава CSS Flexbox.

В этом примере мы создадим два неравных столбца:

Пример

.column {
  с плавающей запятой: слева;
}

.left {
  ширина: 25%;
}

.right {
  ширина: 75%;
}

Попробуйте сами »

В этом примере мы создадим адаптивный макет с двумя столбцами:

Пример

/* Адаптивный макет — когда ширина экрана меньше 600 пикселей, сделайте два столбцы располагаются друг над другом, а не рядом */
@media экран и (макс. ширина: 600 пикселей) {
  .column {
    ширина: 100 %;
  }
}

Попробуйте сами »

Совет: Перейдите к нашему руководству по макетированию веб-сайта CSS, чтобы узнать больше о макеты сайта.

Совет: Перейдите к нашему руководству по адаптивному веб-дизайну CSS, чтобы узнать больше о адаптивный веб-дизайн и сетки.

❮ Предыдущий Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
8 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.