破折号中的实时绘图
Live graphing in dash
新手提醒，我想在 Dash 中创建 3 个图表，其中包含一些数据。所以我有一个 data.csv 文件，它每小时更新一次并在其中存储数据：
2021-01-01 18:07:09|15547|45.03|742031.4|2935|30.7|112045.75|5815|45.0|314413.09|1835|28.8|75511.78
2021-01-01 19:25:57|13995|44.03|660573.87|3046|27.0|114017.46|5024|37.84|256953.02|1911|27.8|77646.2
2021-01-01 20:25:59|13710|44.03|647995.57|3180|25.0|117480.46|5349|30.0|269511.82|1672|28.8|70775.0
2021-01-01 21:25:59|13710|44.03|647995.57|3180|25.0|117480.46|5349|30.0|269511.82|1672|28.8|70775.0
2021-01-01 22:26:00|13863|43.99|637484.0|3613|28.9|134806.24|5316|38.97|245546.28|2100|28.75|96306.19
2021-01-01 23:25:59|14769|42.99|676265.94|3570|28.55|133435.66|4336|38.97|206593.23|2292|28.75|101826.19
2021-01-02 00:25:59|13945|42.99|640842.18|3601|28.5|134301.16|3843|35.99|186926.98|2072|28.75|95096.52
使用此代码：
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
DATA_FILE = "data.csv"
app = dash.Dash()
data = pd.read_csv(
DATA_FILE,
names=[
"date",
"columnOneData",
"columnTwoData",
"columnThreeData",
"columnFourData",
"columnFiveData",
"columnSixData",
"columnSevenData",
"columnEightData",
"columnNineData",
"columnTenData",
"columnElevData",
"columnTwelData",
],
sep="|",
)
date = data.date.tolist()
columnOneData = data.columnOneData.tolist()
columnTwoData = data.columnTwoData.tolist()
columnThreeData = data.columnThreeData.tolist()
columnFourData = data.columnFourData.tolist()
columnFiveData = data.columnFiveData.tolist()
columnSixData = data.columnSixData.tolist()
columnSevenData = data.columnSevenData.tolist()
columnEightData = data.columnEightData.tolist()
columnNineData = data.columnNineData.tolist()
columnTenData = data.columnTenData.tolist()
columnElevData = data.columnElevData.tolist()
columnTwelData = data.columnTwelData.tolist()
app.layout = html.Div(
children=[
html.H1(children="Total numbers"),
dcc.Graph(
id="count",
figure={
"data": [
{
"x": date,
"y": columnOneData,
"type": "line",
"name": "ColOneData",
},
{
"x": date,
"y": columnFourData,
"type": "line",
"name": "ColFourData",
},
{
"x": date,
"y": columnSevenData,
"type": "line",
"name": "ColSevenData",
},
{
"x": date,
"y": columnTenData,
"type": "line",
"name": "ColTenData",
},
],
},
),
html.H1(children="Lowest price"),
dcc.Graph(
id="minprice",
figure={
"data": [
{
"x": date,
"y": columnTwoData,
"type": "line",
"name": "ColTwoData",
},
{
"x": date,
"y": columnFiveData,
"type": "line",
"name": "ColFiveData",
},
{
"x": date,
"y": columnEightData,
"type": "line",
"name": "ColEightData",
},
{
"x": date,
"y": columnElevData,
"type": "line",
"name": "ColElevData",
},
],
},
),
html.H1(children="BuyOut"),
dcc.Graph(
id="buyout",
figure={
"data": [
{
"x": date,
"y": columnThreeData,
"type": "line",
"name": "ColThreeData",
},
{
"x": date,
"y": columnSixData,
"type": "line",
"name": "ColSixData",
},
{
"x": date,
"y": columnNineData,
"type": "line",
"name": "ColNineData",
},
{
"x": date,
"y": columnTwelData,
"type": "line",
"name": "ColTwelData",
},
],
},
),
]
)
if __name__ == "__main__":
app.run_server(debug=True)
我设法创建了我正在寻找的图表，但显然是通过代码 - 它不会在新数据进入时更新，或者主要是在我 刷新 页面时更新。我是 Dash 的新手，我听说过回调并观看了一些视频，但实际上我无法为我的案例重现相同的更新代码。我正在通过显示多个多线图示例或我可以使用的某种示例来寻求一些帮助。谢谢！
试试 Dash Interval Component，专为做到这一点而设计。这里有一个刷新data.csv的小例子。只需 运行 并更改 .csv 文件（它应该有两列用于 x 和 y 坐标。
import dash
import pandas as pd
import plotly.graph_objects as go
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
def _create_fig():
df = pd.read_csv('data.csv')
df.columns=['x','y']
return go.Figure(
data=go.Scatter(
x=df['x'],
y=df['y']))
app.layout = html.Div([
dcc.Graph(
id='g1',
figure=_create_fig()),
dcc.Interval(
id='interval-component',
interval=1*1000, # in milliseconds
n_intervals=0
)
])
@app.callback(
dash.dependencies.Output('g1', 'figure'),
dash.dependencies.Input('interval-component', 'n_intervals'))
def refresh_data(n_clicks):
return _create_fig()
if __name__ == "__main__":
app.run_server(host='0.0.0.0', debug=True, port=8080)
data.csv
的哑数据
1,2
3,4
5,6
和替换它的文件
11,2
3,44
55,6
在同一页面上，您看到您还可以通过将 app.layout 设置为定义布局的函数实例来在刷新时更新数据。这将避免需要回调函数或使用 Interval 组件：
import dash
import pandas as pd
import plotly.graph_objects as go
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
def _create_fig():
df = pd.read_csv('data.csv')
df.columns=['x','y']
return go.Figure(
data=go.Scatter(
x=df['x'],
y=df['y']))
def serve_layout():
return html.Div([
dcc.Graph(
figure=_create_fig()),
])
app.layout = serve_layout
if __name__ == "__main__":
app.run_server(host='0.0.0.0', debug=True, port=8080)
新手提醒，我想在 Dash 中创建 3 个图表，其中包含一些数据。所以我有一个 data.csv 文件，它每小时更新一次并在其中存储数据：
2021-01-01 18:07:09|15547|45.03|742031.4|2935|30.7|112045.75|5815|45.0|314413.09|1835|28.8|75511.78
2021-01-01 19:25:57|13995|44.03|660573.87|3046|27.0|114017.46|5024|37.84|256953.02|1911|27.8|77646.2
2021-01-01 20:25:59|13710|44.03|647995.57|3180|25.0|117480.46|5349|30.0|269511.82|1672|28.8|70775.0
2021-01-01 21:25:59|13710|44.03|647995.57|3180|25.0|117480.46|5349|30.0|269511.82|1672|28.8|70775.0
2021-01-01 22:26:00|13863|43.99|637484.0|3613|28.9|134806.24|5316|38.97|245546.28|2100|28.75|96306.19
2021-01-01 23:25:59|14769|42.99|676265.94|3570|28.55|133435.66|4336|38.97|206593.23|2292|28.75|101826.19
2021-01-02 00:25:59|13945|42.99|640842.18|3601|28.5|134301.16|3843|35.99|186926.98|2072|28.75|95096.52
使用此代码：
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
DATA_FILE = "data.csv"
app = dash.Dash()
data = pd.read_csv(
DATA_FILE,
names=[
"date",
"columnOneData",
"columnTwoData",
"columnThreeData",
"columnFourData",
"columnFiveData",
"columnSixData",
"columnSevenData",
"columnEightData",
"columnNineData",
"columnTenData",
"columnElevData",
"columnTwelData",
],
sep="|",
)
date = data.date.tolist()
columnOneData = data.columnOneData.tolist()
columnTwoData = data.columnTwoData.tolist()
columnThreeData = data.columnThreeData.tolist()
columnFourData = data.columnFourData.tolist()
columnFiveData = data.columnFiveData.tolist()
columnSixData = data.columnSixData.tolist()
columnSevenData = data.columnSevenData.tolist()
columnEightData = data.columnEightData.tolist()
columnNineData = data.columnNineData.tolist()
columnTenData = data.columnTenData.tolist()
columnElevData = data.columnElevData.tolist()
columnTwelData = data.columnTwelData.tolist()
app.layout = html.Div(
children=[
html.H1(children="Total numbers"),
dcc.Graph(
id="count",
figure={
"data": [
{
"x": date,
"y": columnOneData,
"type": "line",
"name": "ColOneData",
},
{
"x": date,
"y": columnFourData,
"type": "line",
"name": "ColFourData",
},
{
"x": date,
"y": columnSevenData,
"type": "line",
"name": "ColSevenData",
},
{
"x": date,
"y": columnTenData,
"type": "line",
"name": "ColTenData",
},
],
},
),
html.H1(children="Lowest price"),
dcc.Graph(
id="minprice",
figure={
"data": [
{
"x": date,
"y": columnTwoData,
"type": "line",
"name": "ColTwoData",
},
{
"x": date,
"y": columnFiveData,
"type": "line",
"name": "ColFiveData",
},
{
"x": date,
"y": columnEightData,
"type": "line",
"name": "ColEightData",
},
{
"x": date,
"y": columnElevData,
"type": "line",
"name": "ColElevData",
},
],
},
),
html.H1(children="BuyOut"),
dcc.Graph(
id="buyout",
figure={
"data": [
{
"x": date,
"y": columnThreeData,
"type": "line",
"name": "ColThreeData",
},
{
"x": date,
"y": columnSixData,
"type": "line",
"name": "ColSixData",
},
{
"x": date,
"y": columnNineData,
"type": "line",
"name": "ColNineData",
},
{
"x": date,
"y": columnTwelData,
"type": "line",
"name": "ColTwelData",
},
],
},
),
]
)
if __name__ == "__main__":
app.run_server(debug=True)
我设法创建了我正在寻找的图表，但显然是通过代码 - 它不会在新数据进入时更新，或者主要是在我 刷新 页面时更新。我是 Dash 的新手，我听说过回调并观看了一些视频，但实际上我无法为我的案例重现相同的更新代码。我正在通过显示多个多线图示例或我可以使用的某种示例来寻求一些帮助。谢谢！
试试 Dash Interval Component，专为做到这一点而设计。这里有一个刷新data.csv的小例子。只需 运行 并更改 .csv 文件（它应该有两列用于 x 和 y 坐标。
import dash
import pandas as pd
import plotly.graph_objects as go
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
def _create_fig():
df = pd.read_csv('data.csv')
df.columns=['x','y']
return go.Figure(
data=go.Scatter(
x=df['x'],
y=df['y']))
app.layout = html.Div([
dcc.Graph(
id='g1',
figure=_create_fig()),
dcc.Interval(
id='interval-component',
interval=1*1000, # in milliseconds
n_intervals=0
)
])
@app.callback(
dash.dependencies.Output('g1', 'figure'),
dash.dependencies.Input('interval-component', 'n_intervals'))
def refresh_data(n_clicks):
return _create_fig()
if __name__ == "__main__":
app.run_server(host='0.0.0.0', debug=True, port=8080)
data.csv
1,2
3,4
5,6
和替换它的文件
11,2
3,44
55,6
在同一页面上，您看到您还可以通过将 app.layout 设置为定义布局的函数实例来在刷新时更新数据。这将避免需要回调函数或使用 Interval 组件：
import dash
import pandas as pd
import plotly.graph_objects as go
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
def _create_fig():
df = pd.read_csv('data.csv')
df.columns=['x','y']
return go.Figure(
data=go.Scatter(
x=df['x'],
y=df['y']))
def serve_layout():
return html.Div([
dcc.Graph(
figure=_create_fig()),
])
app.layout = serve_layout
if __name__ == "__main__":
app.run_server(host='0.0.0.0', debug=True, port=8080)