這周我一直在試圖弄清楚如何通過 Flask 設計一個可編輯的資料表，但沒有取得多大成功。我找到了插件 bootstable，我準備好了我的表格，資料完美地填充了單元格。但我無法 pip install jquery（必需）及其依賴項。這似乎是一個常見問題，我在網上看到的帖子證明了這一點。
所以我又回到了可編輯的 Dash/plotly 資料表。
我的問題是我無法弄清楚如何用我需要使用的資料填充單元格。我粘貼了下面一個 Dash 可編輯模板中的代碼作為示例，以及我使其作業的最佳嘗試。更改列很容易。并且代碼可以很好地處理虛擬資料，但我不知道如何使我的資料（目前為 JSON 格式）與此模板兼容。我已經瀏覽了 Dash/Plotly 網站，但我沒有看到關于這個主題的太多方向。
如何安排我的資料以便它可以被下面代碼中的 data=[ ] 使用？
我的資料是當前采用 JSON 格式的 Python 詞典串列，并通過 Flask 作為簡單串列發送到 index.html。我知道它會轉移，因為它適用于其他不成功的嘗試。如上所述，我只是無法安裝依賴項。如有必要，我可以輕松地將其轉換為 CSV 檔案。有誰知道如何解決這個問題？
在這一點上的任何幫助將不勝感激。
這是在線模板，可在此地址找到。
import dash
from dash.dependencies import Input, Output
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
app = dash.Dash(__name__)
params = [
'Weight', 'Torque', 'Width', 'Height',
'Efficiency', 'Power', 'Displacement'
]
app.layout = html.Div([
dash_table.DataTable(
id='table-editing-simple',
columns=(
[{'id': 'Model', 'name': 'Model'}]
[{'id': p, 'name': p} for p in params]
),
data=[
dict(Model=i, **{param: 0 for param in params})
for i in range(1, 5)
],
editable=True
),
dcc.Graph(id='table-editing-simple-output')
])
@app.callback(
Output('table-editing-simple-output', 'figure'),
Input('table-editing-simple', 'data'),
Input('table-editing-simple', 'columns'))
def display_output(rows, columns):
df = pd.DataFrame(rows, columns=[c['name'] for c in columns])
return {
'data': [{
'type': 'parcoords',
'dimensions': [{
'label': col['name'],
'values': df[col['id']]
} for col in columns]
}]
}
if __name__ == '__main__':
app.run_server(debug=True)
這是我嘗試使其作業，但我收到“錯誤加載布局”訊息，其中 user_edits 是字典串列， each_dict 是串列中的每個字典。
感謝您提供任何真誠的反饋。
app = dash.Dash(__name__)
with open("./json/flask_dict.json", "r") as flask_dicts:
user_edits = json.load(flask_dicts)
app.layout = html.Div([
dash_table.DataTable(
id='table-editing-simple',
columns=(
[{'id': 'Index', 'name': 'Index'}]
[{'id': 'Amounts', 'name': 'Amounts'}]
[{'id': 'Modifiers', 'name': 'Modifiers'}]
[{'id': 'Units', 'name': 'Units'}]
[{'id': 'Ings', 'name': 'Ings'}]
),
data=[{v for k,v in each_dict.items()} for each_dict in user_edits],
editable=True
),
dcc.Graph(id='table-editing-simple-output')
])
如果有幫助，這里是字典串列：
[
{'index': 0, 'amount': '.5', 'mod': 'None', 'units': 'teaspoon', 'ing': 'dried oregano'},
{'index': 1, 'amount': '0.25', 'mod': 'None', 'units': 'tsp', 'ing': 'red chilli flakes'},
{'index': 2, 'amount': '0.25', 'mod': 'None', 'units': 'tsp', 'ing': 'ground cloves'},
{'index': 3, 'amount': '1', 'mod': 'None', 'units': 'tbsp', 'ing': 'sunflower oil'},
{'index': 4, 'amount': '1', 'mod': 'None', 'units': 'tsp', 'ing': 'mustard seeds'},
{'index': 5, 'amount': '1', 'mod': 'divided', 'units': 'tsp', 'ing': 'salt'},
{'index': 6, 'amount': '1.33', 'mod': 'None', 'units': 'tsp', 'ing': 'cumin'},
{'index': 7, 'amount': '1.5', 'mod': 'None', 'units': 'teaspoon', 'ing': 'dried thyme'},
{'index': 8, 'amount': '10', 'mod': 'None', 'units': 'teaspoon', 'ing': 'cardamom pods'},
{'index': 9, 'amount': '3', 'mod': 'None', 'units': 'cm', 'ing': 'ginger'},
{'index': 10, 'amount': '3', 'mod': 'medium', 'units': 'cm', 'ing': 'shallots'},
{'index': 11, 'amount': '300', 'mod': 'None', 'units': 'grams', 'ing': 'red lentils'},
{'index': 12, 'amount': '4', 'mod': 'minced', 'units': 'grams', 'ing': 'cloves of garlic'},
{'index': 13, 'amount': '400', 'mod': 'None', 'units': 'grams', 'ing': 'diced tomatoes'},
{'index': 14, 'amount': '80', 'mod': 'None', 'units': 'grams', 'ing': 'baby spinach'},
{'index': 15, 'amount': '1', 'mod': 'None', 'units': 'handful', 'ing': 'cilantro'},
{'index': 16, 'amount': '1', 'mod': 'Half', 'units': 'handful', 'ing': 'lemon'}
]
uj5u.com熱心網友回復：
dataDataTable的引數期望格式是字典串列，這是真的。但是字典格式應該是這樣的：{'columnName':'value'}. 您的串列推導洗掉鍵（列名）并僅包含值，并作為集合回傳。你所做的是一個集合串列。
嘗試設定data = user_edits。看起來格式已經正確，不需要理解。
編輯：乍一看，您需要更新columns物件以匹配與物件中的鍵相同的拼寫和大小寫data。例如“金額”與“金額”——這些需要匹配。
uj5u.com熱心網友回復：
在 Dash/Plotly 社區的一些幫助下，我終于能夠弄清楚這一點。
我下面的資料已經以正確的方式構建，所以我做對了。我只需要將資料設定為等于我的字典串列。
我的錯誤是認為我需要遍歷它。
如果您想嘗試，這里是輸入和代碼：
1) 需要放置在可編輯表格中的字典串列：
recipe_ents_list = [{'Index': 0, 'Amounts': '.5', 'Modifiers': 'None', 'Units': 'teaspoon', 'Ings': 'dried oregano'},
{'Index': 1, 'Amounts': '0.25','Modifiers': 'None', 'Units': 'tsp', 'Ings': 'red chilli flakes'},
{'Index': 2, 'Amounts': '0.25', 'Modifiers': 'None', 'Units': 'tsp', 'Ings': 'ground cloves'},
{'Index': 3, 'Amounts': '1', 'Modifiers': 'None', 'Units': 'tbsp', 'Ings': 'sunflower oil'},
{'Index': 4, 'Amounts': '1', 'Modifiers': 'None', 'Units': 'tsp', 'Ings': 'mustard seeds'},
{'Index': 5, 'Amounts': '1', 'Modifiers': 'divided', 'Units': 'tsp', 'Ings': 'salt'},
{'Index': 6, 'Amounts': '1.33', 'Modifiers': 'None', 'Units': 'tsp', 'Ings': 'cumin'},
{'Index': 7, 'Amounts': '1.5', 'Modifiers': 'None', 'Units': 'teaspoon', 'Ings': 'dried thyme'},
{'Index': 8, 'Amounts': '10', 'Modifiers': 'None', 'Units': 'teaspoon', 'Ings': 'cardamom pods'},
{'Index': 9, 'Amounts': '3', 'Modifiers': 'None', 'Units': 'cm', 'Ings': 'ginger'},
{'Index': 10, 'Amounts': '3', 'Modifiers': 'medium', 'Units': 'cm', 'Ings': 'shallots'},
{'Index': 11, 'Amounts': '300', 'Modifiers': 'None', 'Units': 'grams', 'Ings': 'red lentils'},
{'Index': 12, 'Amounts': '4', 'Modifiers': 'minced', 'Units': 'grams', 'Ings': 'cloves of garlic'},
{'Index': 13, 'Amounts':'400', 'Modifiers': 'None', 'Units': 'grams', 'Ings': 'diced tomatoes'},
{'Index': 14, 'Amounts': '80', 'Modifiers': 'None', 'Units': 'grams', 'Ings': 'baby spinach'},
{'Index': 15, 'Amounts': '1', 'Modifiers': 'None', 'Units': 'handful','Ings': 'cilantro'},
{'Index': 16, 'Amounts': '1', 'Modifiers': 'Half', 'Units': 'handful', 'Ings': 'lemon'}]
2）這是最終的作業代碼。您可以使用上面的字典和下面的代碼復制該圖。它迫切需要格式化，但它是準確且可編輯的。
from dash import Dash, dcc, html, dash_table
app = Dash(__name__)
app.layout = html.Div([
dash_table.DataTable(
id='table-editing-simple',
columns=[{'id': i, 'name':i} for i in ['Index', 'Amounts', 'Modifiers', 'Units', 'Ings']],
data=recipe_ents_list,
editable=True
),
dcc.Graph(id='table-editing-simple-output')
])
if __name__ == "__main__":
app.run_server(debug=True)
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/375548.html