Làm thế nào để bạn vẽ đồ thị động trong python?

Ví dụ này trình bày cách tự động thêm và xóa các ô khỏi bố cục [trong trường hợp này là Cột] bằng cách sử dụng các phương thức

$ python stocksdata.py
 * Serving Flask app 'stocksdata' [lazy loading]
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on //192.168.1.89:5000/ [Press CTRL+C to quit]

$ python stocksdata.py
 * Serving Flask app 'stocksdata' [lazy loading]
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on //192.168.1.89:5000/ [Press CTRL+C to quit]

slider = pn.widgets.IntSlider[name='N', start=0, end=5]

column = pn.Column['This column will be populated with N Plots', sizing_mode="stretch_width"]

def set_plots[event]:
    nplots = event.new-event.old
    for i in range[abs[nplots]]:
        if nplots  0:
            column.append[hv.Scatter[np.random.randn[1000, 2]].opts[responsive=True, height=300]]
            
    column[0]=f'This column will be populated with {event.new} Plots'
    
slider.param.watch[set_plots, 'value']
slider.value = 1

pn.Row[pn.Column[slider, sizing_mode="fixed", width=300], column, sizing_mode="stretch_width"]

$ python stocksdata.py
 * Serving Flask app 'stocksdata' [lazy loading]
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on //192.168.1.89:5000/ [Press CTRL+C to quit]

description = "This example demonstrates **how to dynamically add and remove plots** from a layout [in this case a Column] using the ``pop`` and ``append`` methods."
pn.template.FastListTemplate[site="Panel", title="Dynamic Plot Layout", sidebar=[slider], main=[description, column]].servable[];

Trang web này được tạo từ sổ ghi chép Jupyter và không phải tất cả tương tác sẽ hoạt động trên trang web này. Nhấp chuột phải để tải xuống và chạy cục bộ để có đầy đủ khả năng tương tác được hỗ trợ bởi Python

Hầu hết khi nói đến matplotlib, bạn có thể sử dụng nó để tạo trực quan hóa tĩnh như biểu đồ đường, biểu đồ, biểu đồ hình tròn, biểu đồ phân tán, v.v. Tuy nhiên, nếu bạn muốn tạo một biểu đồ động tự cập nhật theo thời gian thì sao?

Trong bài viết này tôi sẽ hướng dẫn các bạn cách sử dụng matplotlib để tạo biểu đồ chuỗi thời gian động. Đặc biệt, bạn sẽ sử dụng nó để hiển thị giá của một cổ phiếu và cập nhật động mỗi giây

Thay vì kết nối với API cổ phiếu trực tiếp, việc viết API mô phỏng của riêng bạn để truy xuất giá cổ phiếu sẽ dễ dàng hơn. Đối với điều này, tôi sẽ sử dụng khung bình để tạo API REST đơn giản với một điểm cuối duy nhất để lấy giá cổ phiếu

Đây là toàn bộ chương trình cho API REST [mà tôi đã đặt tên là stockdata. py]

import pickle
from flask import Flask, request, jsonify    
import numpy as npapp = Flask[__name__]@app.route['/stocks/v1/fetch', methods=['POST']]
def fetch[]:
    #---get the features to predict---
    details = request.json    #---create the features list for prediction---
    symbol = details["Symbol"]     #---formulate the response to return to client---
    response = {}
    response['symbol'] = symbol
    if symbol == 'AAPL':
        response['price'] = np.random.uniform[168,172]
    if symbol == 'AMD':
        response['price'] = np.random.uniform[140,145]
    if symbol == 'AMZN':
        response['price'] = np.random.uniform[2900,3200]    
    return  jsonify[response]if __name__ == '__main__':
    app.run[host='0.0.0.0', port=5000]

Trong chương trình trên, có một điểm cuối duy nhất —

$ python stocksdata.py
 * Serving Flask app 'stocksdata' [lazy loading]
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on //192.168.1.89:5000/ [Press CTRL+C to quit]

Đó là tất cả cho API REST. Để kiểm tra API REST, hãy nhập lệnh sau trong Terminal

$ python stocksdata.py
 * Serving Flask app 'stocksdata' [lazy loading]
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on //192.168.1.89:5000/ [Press CTRL+C to quit]

Kiểm tra API REST

Dễ dàng kiểm tra API REST. Chỉ cần sử dụng curl với các tùy chọn sau

$ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AAPL"}'

Người dùng Windows nên lưu ý rằng ký tự trích dẫn đơn [

$ python stocksdata.py
 * Serving Flask app 'stocksdata' [lazy loading]
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on //192.168.1.89:5000/ [Press CTRL+C to quit]

9] không được hỗ trợ trong dòng lệnh. Do đó, trong lệnh trên, chuỗi JSON phải được trích dẫn kép như thế này.

$ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AAPL"}'

0

Bạn sẽ nhận được kết quả dưới dạng chuỗi JSON

Bạn có thể thử các ký hiệu chứng khoán khác nhau

$ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AMD"}'$ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AMZN"}'

Sử dụng API REST bằng Python

Bây giờ API REST đang hoạt động, bạn sẽ cần sử dụng API bằng Python. Đối với điều này, hãy tạo một tệp có tên DisplayStock. py và điền vào đó đoạn mã sau

description = "This example demonstrates **how to dynamically add and remove plots** from a layout [in this case a Column] using the ``pop`` and ``append`` methods."
pn.template.FastListTemplate[site="Panel", title="Dynamic Plot Layout", sidebar=[slider], main=[description, column]].servable[];

Lưu ý rằng giá của cổ phiếu mà bạn muốn truy xuất được chuyển qua dưới dạng đối số lệnh —

$ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AAPL"}'

Để kiểm tra chương trình trên, gõ lệnh sau trong cửa sổ Terminal khác

description = "This example demonstrates **how to dynamically add and remove plots** from a layout [in this case a Column] using the ``pop`` and ``append`` methods."
pn.template.FastListTemplate[site="Panel", title="Dynamic Plot Layout", sidebar=[slider], main=[description, column]].servable[];

Bạn sẽ thấy một giá trị được in

description = "This example demonstrates **how to dynamically add and remove plots** from a layout [in this case a Column] using the ``pop`` and ``append`` methods."
pn.template.FastListTemplate[site="Panel", title="Dynamic Plot Layout", sidebar=[slider], main=[description, column]].servable[];

Sử dụng API REST mà chúng tôi đã phát triển trong phần trước, bây giờ chúng tôi muốn tạo biểu đồ chuỗi thời gian hiển thị giá của một cổ phiếu theo thời gian. Cho đến nay trong hầu hết các ví dụ matplotlib mà chúng ta đã thấy, tất cả các biểu đồ được vẽ hầu hết là tĩnh. Điều gì sẽ xảy ra nếu chúng ta muốn làm cho biểu đồ trở nên sống động và vẽ biểu đồ giá cổ phiếu một cách linh hoạt? . Hãy xem làm thế nào chúng ta có thể đạt được điều này

Ý tưởng cơ bản trước hết là tạo một hàm để vẽ các điểm khác nhau trong biểu đồ chuỗi thời gian. Khi các điểm mới được thêm vào chuỗi thời gian, bạn có thể cập nhật và tạo hoạt ảnh cho biểu đồ bằng cách gọi hàm nhiều lần bằng cách sử dụng lớp

$ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AAPL"}'

$ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AAPL"}'

Đoạn mã sau minh họa ý tưởng

description = "This example demonstrates **how to dynamically add and remove plots** from a layout [in this case a Column] using the ``pop`` and ``append`` methods."
pn.template.FastListTemplate[site="Panel", title="Dynamic Plot Layout", sidebar=[slider], main=[description, column]].servable[];

Ở trên

• $ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AAPL"}'

  4 là hàm tự xác định chịu trách nhiệm vẽ đồ thị chuỗi thời gian. Nó nhận một đối số bắt buộc chỉ định số khung. Số này là số tự động tăng

• $ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AAPL"}'

  5 chỉ định tần suất gọi hàm

  $ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AAPL"}'

  6 để cập nhật hoạt ảnh. Đơn vị tính bằng mili giây và trong ví dụ này, hoạt ảnh được làm mới sau mỗi 1 giây
• Lưu ý rằng điều quan trọng là gán thể hiện của lớp

  $ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AAPL"}'

  2 cho một biến, nếu không hoạt ảnh sẽ không bắt đầu. Ngoài ra, bạn cần gọi

  $ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AAPL"}'

  8 để bắt đầu hoạt ảnh

Đó là nó. Bây giờ chúng tôi đã sẵn sàng để điền vào các chi tiết để vẽ chuỗi thời gian của chúng tôi. Chúng tôi sẽ sử dụng cùng một DisplayStock. py mà chúng tôi đã tạo trước đó

import pickle
from flask import Flask, request, jsonify    
import numpy as npapp = Flask[__name__]@app.route['/stocks/v1/fetch', methods=['POST']]
def fetch[]:
    #---get the features to predict---
    details = request.json    #---create the features list for prediction---
    symbol = details["Symbol"]     #---formulate the response to return to client---
    response = {}
    response['symbol'] = symbol
    if symbol == 'AAPL':
        response['price'] = np.random.uniform[168,172]
    if symbol == 'AMD':
        response['price'] = np.random.uniform[140,145]
    if symbol == 'AMZN':
        response['price'] = np.random.uniform[2900,3200]    
    return  jsonify[response]if __name__ == '__main__':
    app.run[host='0.0.0.0', port=5000]

Hầu hết các mã trong đoạn mã đều tự giải thích, nhưng đây là một số điểm đáng được đề cập

• Lớp

  $ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AAPL"}'

  9 kiểm soát khoảng cách của các dấu tích trên trục x hoặc trục y
• Đối với trục x, dấu tick hiển thị thời gian. Khi thời gian trôi qua, các giá trị cho trục x sẽ tăng lên, do đó, điều quan trọng là phải điều chỉnh khoảng cách giữa các dấu x để bạn có một số dấu x cố định
• Tương tự như vậy đối với trục y, phạm vi giá của các cổ phiếu khác nhau sẽ khác nhau và do đó, điều quan trọng là phải điều chỉnh khoảng cách giữa các dấu kiểm y để bạn có một số dấu kiểm y cố định
• Dựa trên phạm vi giá của cổ phiếu, tôi đã thêm vùng đệm 20% của phạm vi giá để chúng có một khoảng trống ở trên cùng và dưới cùng của biểu đồ. Vui lòng thay đổi tỷ lệ phần trăm để tìm giao diện trực quan tối ưu cho biểu đồ của bạn
• Cuối cùng, ứng dụng cũng đang mong đợi đối số thứ hai chỉ định màu sẽ vẽ cho biểu đồ

Bây giờ bạn có thể kiểm tra ứng dụng bằng cách gõ lệnh sau trong Terminal

$ python stocksdata.py
 * Serving Flask app 'stocksdata' [lazy loading]
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on //192.168.1.89:5000/ [Press CTRL+C to quit]

Biểu đồ sẽ được cập nhật mỗi giây

Và đây là cách nó trông giống như sau một thời gian

Đây là video về cách hoạt hình trông như thế nào

Để làm cho biểu đồ hấp dẫn hơn, bạn có thể tô một số màu cho biểu đồ. Bạn có thể làm điều này bằng hàm

{"price":171.65226451409433,"symbol":"AAPL"}

$ python stocksdata.py
 * Serving Flask app 'stocksdata' [lazy loading]
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on //192.168.1.89:5000/ [Press CTRL+C to quit]

Biểu đồ bây giờ sẽ được tô màu vàng

Tùy thuộc vào sở thích của bạn, màu tô có thể không quá thú vị. Làm thế nào về việc thực hiện một gradient?

Hóa ra bạn có thể thực hiện tô chuyển màu bằng cách sử dụng lớp

{"price":171.65226451409433,"symbol":"AAPL"}

{"price":171.65226451409433,"symbol":"AAPL"}

$ python stocksdata.py
 * Serving Flask app 'stocksdata' [lazy loading]
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on //192.168.1.89:5000/ [Press CTRL+C to quit]

Lưu ý rằng bây giờ ứng dụng mong đợi đối số thứ ba chỉ định bản đồ màu [

{"price":171.65226451409433,"symbol":"AAPL"}

Chọn Bản đồ màu trong Matplotlib - Matplotlib 3. 5. 1 tài liệu

Matplotlib có một số bản đồ màu tích hợp có thể truy cập qua matplotlib. cm. get_cmap. Ngoài ra còn có các thư viện bên ngoài…

matplotlib. tổ chức

Dưới đây là một số giá trị cmap bạn có thể thử

$ python stocksdata.py
 * Serving Flask app 'stocksdata' [lazy loading]
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on //192.168.1.89:5000/ [Press CTRL+C to quit]

Hãy thử một trong những giá trị cmap trong danh mục Sequential —

{"price":171.65226451409433,"symbol":"AAPL"}

$ python stocksdata.py
 * Serving Flask app 'stocksdata' [lazy loading]
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on //192.168.1.89:5000/ [Press CTRL+C to quit]

Bạn sẽ thấy màu tô gradient màu xanh lá cây

Nếu bạn muốn tô màu gradient hào nhoáng hơn, hãy thử cmap

{"price":171.65226451409433,"symbol":"AAPL"}

$ python stocksdata.py
 * Serving Flask app 'stocksdata' [lazy loading]
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on //192.168.1.89:5000/ [Press CTRL+C to quit]

Đây là video về biểu đồ trông như thế nào với ____84cmap

Khi chương trình chạy, bạn sẽ nhận ra rằng trục x bị bóp rất chặt

Đối với các ứng dụng như giá cổ phiếu, điều quan trọng là phải hiển thị tất cả các giá trị trong trục x từ khi bắt đầu giao dịch cho đến khi kết thúc. Nhưng đối với một số ứng dụng khác, nơi không cần thiết phải hiển thị tất cả các giá trị, sẽ rất hữu ích khi có thể dịch chuyển biểu đồ trên trục hoành khi thời gian trôi qua

Hãy thêm câu lệnh sau vào ứng dụng

$ python stocksdata.py
 * Serving Flask app 'stocksdata' [lazy loading]
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on //192.168.1.89:5000/ [Press CTRL+C to quit]

Ở phần trên, tôi đã sử dụng số khung

{"price":171.65226451409433,"symbol":"AAPL"}

$ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AAPL"}'

{"price":171.65226451409433,"symbol":"AAPL"}

$ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AMD"}'$ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AMZN"}'

$ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AMD"}'$ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AMZN"}'

Khi bạn chạy chương trình lần đầu tiên, mọi thứ trông giống như những gì chúng ta đã thấy trước đó

Sau một thời gian, bạn sẽ thấy trục x bắt đầu dịch chuyển

Cách tốt nhất để hình dung điều này là thông qua một video

Tôi hy vọng rằng bài viết này đã mang đến cho bạn một cái nhìn mới mẻ về khả năng của matplotlib. Thay vì các biểu đồ tĩnh thông thường, matplotlib có khả năng thực hiện một số điều thực sự tuyệt vời, chẳng hạn như hoạt ảnh, cũng như kết xuất 3D [tôi sẽ nói về điều này trong một bài viết khác]. Một điều nữa trước khi tôi kết thúc bài viết này. Hãy thử chạy chương trình ở chế độ nền bằng cách sử dụng ký tự

$ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AMD"}'$ curl -H "Content-Type: application/json" -X POST  //localhost:5000/stocks/v1/fetch  -d '{"Symbol":"AMZN"}'

Âm mưu động là gì?

Tại sao sử dụng matplotlib nội tuyến?