短划线实时绘图

Question

Noob alert，我想在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的新手，我听说过回调，也看过一些视频，但实际上我无法在我的案例中复制相同的更新代码。我想通过展示多个多行图形示例或我可以使用的某种示例来寻求一些帮助。非常感谢。

Answer 1

试试Dash Interval组件，它就是这样设计的。下面是一个刷新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)