Đồ thị động Python
|
Chào mừng bạn đến với phần ba của loạt bài hướng dẫn trực quan hóa dữ liệu dựa trên web với Dash. Cho đến thời điểm này, chúng ta đã học cách tạo một biểu đồ đơn giản và cách cập nhật động các thành phần HTML trong thời gian thực mà không cần làm mới trang. Mặc dù chúng tôi chỉ xuất lại cùng một văn bản khi chúng tôi nhập, chúng tôi cũng có thể áp dụng thêm một số logic cho đầu vào và xuất bất kỳ thứ gì, không chỉ văn bản, chẳng hạn như biểu đồ. Đó là những gì chúng ta sẽ làm ở đây Show Tôi sẽ yêu cầu chúng ta sử dụng Pandas và chúng ta sẽ lấy một số thông tin về chứng khoán, nhưng bạn có thể sử dụng bất cứ thứ gì bạn muốn. Bất cứ khi nào tôi làm ví dụ về tài chính, mọi người đều phàn nàn vì họ không hiểu về tài chính. Nó chỉ là ngày tháng và giá trị. Bạn không cần phải đọc quá sâu về nó, tôi hứa. Để làm theo chính xác, bạn sẽ cần Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425091 và Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425092. Lấy chúng Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425093 Bạn đã biết mọi thứ bạn cần biết để thực hiện tất cả những điều này, ngoại trừ việc bạn có thể chưa biết cách lấy dữ liệu từ trình đọc dữ liệu của gấu trúc. Hãy làm điều đó thật nhanh import datetime
import pandas_datareader.data as web
start = datetime.datetime(2015, 1, 1)
end = datetime.datetime.now()
df = web.DataReader("TSLA", 'morningstar', start, end)
df.reset_index(inplace=True)
df.set_index("Date", inplace=True)
df = df.drop("Symbol", axis=1)
print(df.head())đầu ra Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 3442509 Bạn có thể nhận được cảnh báo về việc Google Finance không đáng tin cậy hoặc có thể chúng tôi đã đi đến cuối con đường với Google Finance. Nếu đó chỉ là một cảnh báo, hãy bỏ qua nó, nếu không thì hãy xem một số nơi như Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425094 và vui lòng gửi email cho tôi, tôi có thể cập nhật mã này bằng một số nguồn khác Đó là nó. Đặt cho nó một biểu tượng để lấy dữ liệu, bạn muốn lấy dữ liệu từ nguồn nào, ngày giờ bắt đầu, ngày giờ kết thúc và bạn đã hoàn tất. Sự trở lại là một khung dữ liệu Pandas. Nếu bạn không quen thuộc với Pandas, về cơ bản, nó sẽ trả về dữ liệu ở dạng bảng. Hãy nghĩ về nó giống như Microsoft Excel, nhưng dành cho Python. Nếu muốn tìm hiểu thêm, bạn có thể xem bài hướng dẫn Phân tích dữ liệu với Python và Pandas Như vậy là chúng ta đã xem cách vẽ một đồ thị cơ bản rồi import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''
Dash: A web application framework for Python.
'''),
dcc.Graph(
id='example-graph',
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'line', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
],
'layout': {
'title': 'Dash Data Visualization'
}
}
)
])
if __name__ == '__main__':
app.run_server(debug=True)Tất cả những gì chúng ta cần làm về cơ bản chỉ là thay thế các giá trị x và y bằng bất cứ thứ gì chúng ta muốn vào lúc này. Đủ dễ dàng, bắt đầu từ mã biểu đồ cơ bản ở trên, chúng ta cần nhập pandas import pandas_datareader.data as web import datetime Tiếp theo, hãy đưa vào thông tin chứng khoán ________số 8_______Bây giờ, bên trong ứng dụng. bố cục, hãy sửa đổi các phần Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425095 {'x': df.index, 'y': df.Close, 'type': 'line', 'name': stock},Tôi cũng đã tự do thay đổi tên và tiêu đề thành cổ phiếu cụ thể. Mã đầy đủ cho đến thời điểm này import pandas_datareader.data as web
import datetime
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
stock = 'TSLA'
start = datetime.datetime(2015, 1, 1)
end = datetime.datetime(2018, 2, 8)
df = web.DataReader(stock, 'morningstar', start, end)
df.reset_index(inplace=True)
df.set_index("Date", inplace=True)
df = df.drop("Symbol", axis=1)
app.layout = html.Div(children=[
html.H1(children='Whoa, a graph!'),
html.Div(children='''
Making a stock graph!.
'''),
dcc.Graph(
id='example-graph',
figure={
'data': [
{'x': df.index, 'y': df.Close, 'type': 'line', 'name': stock},
],
'layout': {
'title': stock
}
}
)
])
if __name__ == '__main__':
app.run_server(debug=True)Kết quả ở đây Được rồi, và cuối cùng, hãy đưa vào trường đầu vào đó, và thay vì tạo đầu ra chỉ là một số văn bản, hãy tạo đầu ra là chính biểu đồ Nhập mọi thứ chúng tôi cần, cài đặt ứng dụng và mô tả bố cục import pandas_datareader.data as web
import datetime
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash()
app.layout = html.Div(children=[
html.Div(children='''
Symbol to graph:
'''),
dcc.Input(id='input', value='', type='text'),
html.Div(id='output-graph'),
])Trong trường hợp trên, chúng ta có thể thấy đầu vào là như nhau, chỉ bắt đầu trống lần này. Sau đó, chúng tôi có một div HTML đang chờ chấp nhận tiêu đề dữ liệu cho Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425096 CỦA Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425097. Chức năng đó sẽ làm điều đó sẽ cần phải được bao bọc, giống như trước đây @app.callback(
Output(component_id='output-graph', component_property='children'),
[Input(component_id='input', component_property='value')]
)Như chúng ta có thể thấy, điều này gần giống với trước đây, nó chỉ xác định đầu vào đến từ đâu và đầu ra sẽ đi đâu. Bây giờ cho chức năng @app.callback(
Output(component_id='output-graph', component_property='children'),
[Input(component_id='input', component_property='value')]
)
def update_value(input_data):
start = datetime.datetime(2015, 1, 1)
end = datetime.datetime.now()
df = web.DataReader(input_data, 'morningstar', start, end)
df.reset_index(inplace=True)
df.set_index("Date", inplace=True)
df = df.drop("Symbol", axis=1)
return dcc.Graph(
id='example-graph',
figure={
'data': [
{'x': df.index, 'y': df.Close, 'type': 'line', 'name': input_data},
],
'layout': {
'title': input_data
}
}
)Tham số Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425098 sẽ chứa những gì chúng tôi hy vọng là một biểu tượng chứng khoán. Từ đó, chúng tôi đặt thời gian bắt đầu cho đầu năm 2015 và sau đó nó sẽ chỉ vẽ biểu đồ cho bất kỳ thời điểm nào ngay bây giờ. Chúng tôi lấy dữ liệu, lưu trữ khung dữ liệu kết quả vào Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425099. Bây giờ, chúng tôi chỉ trả về toàn bộ phần tử import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''
Dash: A web application framework for Python.
'''),
dcc.Graph(
id='example-graph',
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'line', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
],
'layout': {
'title': 'Dash Data Visualization'
}
}
)
])
if __name__ == '__main__':
app.run_server(debug=True)0 mà chúng tôi đã hiển thị trước đó. Toàn bộ phần tử được cập nhật động, vì vậy chúng tôi cũng có thể thay đổi tiêu đề. ứng dụng đầy đủOpen High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425090 Kết quả Khá mát mẻ. Những thứ như thế này, ngay cả khi sử dụng các khung khác nhau, thông thường sẽ khá tẻ nhạt, mất một lúc để viết mã và mất nhiều dòng để thực hiện. Điều này đặc biệt đơn giản để làm Mặc dù thật tuyệt khi có thể tự động cập nhật các biểu đồ dựa trên thông tin đầu vào từ chúng tôi, nhưng nếu chúng tôi muốn các biểu đồ tự cập nhật thì sao? hướng dẫn tiếp theo. Biểu đồ trực tiếp - GUI trực quan hóa dữ liệu với Dash và Python p. 4
|
