pb graph鼠标移上显示数据_数据分析手把手入门：打造自己的股票分析系统（前端不求人）...

最新推荐文章于 2024-02-24 22:33:44 发布

weixin_39951396

最新推荐文章于 2024-02-24 22:33:44 发布

阅读量269

点赞数

文章标签： pb graph鼠标移上显示数据怎么把前端option中的value传到后台

前言

数据分析很重要的一步是结果展示与汇报。无论是给客户还是上级。你可以选择PPT展示，也可以给出word文档展示，但是如果有一个交互式的网站（app）展示，无疑是更加吸引人。

说起网站，很多人想到PHP，JS，但是绝大多数“数据分析师”没有这些技术，原因主要是：这完全是两个领域，精力有限的人很少会大量投入时间来精通。

python中有很多优秀的开源网页设计框架，Django和Flask便是其中两个“巨头”，在企业中应用广泛。但是Django和Flask 固然优秀，但是它毕竟只是框架，关于页面设计的细节多数还是JS，而且有的时候你学了好几天设计出来的页面依然平庸无奇（我的就是奇丑无比）。

但是数据分析数据师如果想通过网页快速展示自己的成果，一定要学JS？一定要“重量级”框架？一定要忍受奇丑无比？

NO！NO! NO!

今天我们可以用纯python入门一个股票分析系统，不用JS，不用深入框架，入门一样酷炫，简约而不简单。

主角登场

作为入门教程，我们要实现以下功能：

设计一个网站app，查看股票的历史记录
获取股票列表，支持下拉选择以及输入检索
支持时间段查询
画出经典的股票趋势图
动态调整时间段
支持鼠标悬停显示当日详细详细

下面我们一一解释每个环节的实现方式，我估计本实现的难度系数在2颗星（只要你懂python）。

网站如何设计

这是一个轻量版的网站，我们这里自然无需用Django和(原生）Flask的重量级框架，但是即便是一个简单的demo，我依然希望网站保留可扩展的能力，比如实际的应用中我们可能还有其他功能：

需要实时显示当日股票信息
显示大盘信息
显示多个趋势
显示周趋势，月度趋势
添加表格，显示股票问题
显示实时新闻
甚至增加一键买/卖
增加量化分析模型

以上通通可以扩展实现，依然无需前端，有兴趣的可以进一步交流。

今天的网站设计采用的Plotly Dash，我相信很多人听过Plolty这个包，也用它画过简单的图（相当于交互版的matplotlib），但是dash 的功能很多人没有使用过。

网站链接如下：https://plotly.com/dash/。你可以看到很多交互式Dashboard的设计，比如用于制造业。

关于Plotly dash，以下优缺点纯属个人亲测（实际项目）感受，可以帮你决定是否适合你：

优点：
- html 设计以及用户操作响应采用python，无需了解JS
- 框架采用的Flask，所以Flask的功能都可以在这里实现，意味着强大的后续功能扩展
- 对Flask进行了一定程度的封装，所以入手极快
- 界面美观，如上图，用过plotly的人都喜欢它的设计
- 支持交互式操作，比如plotly的图画带有各种按钮
- 被很多开源BI 支持，比如grafana
- 适合数据分析师
缺点：
- 不适合大型项目，用户响应速度没有JS快（因为是纯python）
- 不适合网站开发者，因为使用习惯不同

股票信息如何获取

这里不建议采用爬虫的方式进行获取，因为时间成本太高，而且获取的质量不稳定，作为一个网站，我们需要选用稳定的源。

有很多股票信息的开源包可以选择，我亲测过两个接口包，一个是akshare，一个Tushare。

这个demo中我们两个都进行了测试，但是akshare的访问速度和稳定性不佳（有可能是我个人网络问题），最后我选择了Tushare。

关于Tushare，采用注册制，注册即可获取足够积分来稳定的获取股票的信息，为了稳定性，我最终选择了Tushare，它也的确不辜负所望。

由于我的积分目前不足以获取股票的周线，月线，以及大盘的信息，所以没法在demo中涵盖。如果你是新手，不如点击我的邀请链接，注册的同时帮我获取积分吧：https://tushare.pro/register?reg=379929

这样你也可以试试文本的代码。

开启实战

首先导入我们所需的“主角”以及“配角”，这里依然将每个所需的包功能放在注释中。

import tushare as ts  # 获取股票信息
import dash # 设计网站
from datetime import datetime, timedelta
import dash_core_components as dcc #设计网站采用的核心插件库
import dash_bootstrap_components as dbc #设计网站采用的美化页面
import dash_html_components as html  #设计网站采用的核心插件库
from dash.dependencies import Input, Output, State # 完成用户点击响应
import plotly.graph_objects as go # 画出趋势图
from dash.exceptions import PreventUpdate
import pandas as pd

我们需要给网站中每个元素定义ID，方便后面进行回调，响应用户的操作。

# ID definitions
id_button_update_a_share_list = 'id-button-update-a-share-list'
id_dpl_share_code = 'id-dpl-share-code'
id_date_picker_range = 'id-date-picker-range'
id_button_query_trend = 'id-button-query-trend'
id_graph_hist_trend_graphic = 'id-graph-hist-trend-graphic'

这里主要的控件就是：

下拉列表，用于选择股票
右侧有更新股票清单按钮，用于更新股票清单，因为股票清单很久才更新一次，我们没有必要每次开网页都实时获取，可以从本地数据库或者本地文件中获取。
选择时间控件
查看股票信息按钮
绘图区

定义多个功能函数

为了方便调用，我们将一些常用的功能变成函数：

update_a_share_list 用于从csv中读取股票代码以及名称
get_A_stock_list 用于从网上下载最新的股票清单信息
write_A_stock_list_to_csv 网上下载的信息同步到本地
share_dict_to_option 将本地文件中的信息，合并成控件的选项，因为有些人知道股票代码，有些人知道股票名称，因此有必要支持两种检索
get_trend_df：用于通过股票代码，以及时间段来获取日线
plot_candlestick：用于画股票的K线，因为国内外的颜色代码不同（需要定义颜色，红色代表涨）

def update_a_share_list():
    # display a stock share list from csv
    a_share_list_df = pd.read_csv(A_STOCK_FILE, index_col='ts_code')
    share_dict = a_share_list_df.to_dict()['name']
    return share_dict_to_option(share_dict)


def get_A_stock_list():
    # fetch list from internet
    share_df = ts_pro.stock_basic(
        exchange='',
        list_status='L',
        fields='ts_code,name')
    share_df.set_index('ts_code', inplace=True)
    return share_df


def write_A_stock_list_to_csv(file):
    # sync to csv
    share_df = get_A_stock_list()
    share_df.to_csv(file)


def share_dict_to_option(share_dict):
    # convert name and code to options
    name_list = [str(key) + '-' + str(value)
                 for key, value in share_dict.items()]
    return list_to_option_list(name_list)


def split_share_to_code(share):
    # split options to get code
    code = share.split('-')[0]
    return code


def list_to_option_list(list):
    # quick create dropdown options from list
    return [{"label": i, "value": i} for i in list]


def get_trend_df(code, start_date, end_date):
    # get history tend by ts_code,start_date,end_datess
    df = ts_pro.daily(ts_code=code, start_date=start_date, end_date=end_date)
    df['trade_date'] = pd.to_datetime(df['trade_date'], format='%Y%m%d')
    df.set_index('trade_date', inplace=True)
    df.sort_index(inplace=True)  # sort result by date (datetime)
    return df


def plot_candlestick(df):
    # plot candlestick
    # customize the color to China Stock
    fig = go.Figure(
        data=[
            go.Candlestick(
                x=df.index,
                open=df['open'],
                high=df['high'],
                low=df['low'],
                close=df['close'],
                increasing=dict(
                    line=dict(
                        color="#FF0000")),
                decreasing=dict(
                    line=dict(
                        color="#00FF00")),
            )])

    fig.update_layout(
        margin=dict(l=2, r=10, t=20, b=20),
        paper_bgcolor="LightSteelBlue",
    )  # change the layout of figure
    return fig

设计网页

网站框架的建立仅仅需要一行代码：dash.Dash(__name__)。这样就自动给你创建好一切框架，剩下的就是需要添加按钮，控件等。

这里我们通过按钮的设计来看一下该方案的简单快捷：

update_a_share_button = dbc.Button(
    id=id_button_update_a_share_list,
    color='light',
    children='更新列表', outline=True)

这是一个python函数，意味着你需要的主要配置都在函数的参数中。id 是前文提到的元素id，主要用于回调函数。color 不用说，就是颜色定义。因为这个更新股票列表按钮不常用，所以配色采用‘light’，outline 设为True，让他看起来像隐藏了一样，只有鼠标滑过才会显示。

Dropdown 是下拉列表控件，option参数很关键，也就是下拉的选项。调用我们前面定义的函数update_a_share_list来添加选项。
为了让界面美观一点，这里我们调用bootstrap进行对齐设计。
Graph 控件用于绘图，核心的K线采用plot_candlestick函数绘制。
最后，设计好的所有控件，放在app.layout中即可。

这样一个静态的网页就设计好了。

# create dash app
app = dash.Dash(__name__)

# layout design
header = html.H2("股票查询", className='text-center')
# update list button
update_a_share_button = dbc.Button(
    id=id_button_update_a_share_list,
    color='light',
    children='更新列表', outline=True)
# share select dropdown list
select_share = dcc.Dropdown(
    id=id_dpl_share_code,
    options=update_a_share_list()
)
# datetime picker
date_pick = dcc.DatePickerRange(
    id='id-date-picker-range',
    max_date_allowed=datetime.today(),
    start_date=datetime.today().date() - timedelta(days=60),
    end_date=datetime.today().date()
)
# query button
query_button = dbc.Button(
    "查询",
    color="warning",
    className="mr-1",
    id=id_button_query_trend,
    outline=False)

# make a better row/col layout
select_share_row = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(
                    [select_share],
                    className='col-5'),
                dbc.Col(
                    [update_a_share_button],
                    className='col-2')]),
        html.Br(),
        dbc.Row(
            [
                dbc.Col(
                    [date_pick],
                    className='col-5'),
                dbc.Col(
                    [query_button],
                    className='col-1')])])

# get default figure
default_fig = plot_candlestick(
    get_trend_df(
        '000001.SZ',
        start_date='20200101',
        end_date='20200707'))
# graphic div
graphic_div = dbc.Container(
    [dcc.Graph(figure=default_fig, id=id_graph_hist_trend_graphic)])

# fully layout
app.layout = html.Div([
    header,
    select_share_row,
    html.Br(),
    graphic_div,
])

响应用户操作

Dash 采用callback 函数用于响应用户的操作，主要的状态有三个：

Input：表示”一触即发“，也就是用户只要进行了该操作，就会调用callback 函数，常见的如按钮的点击动作
State：表示“整装待发”，也就是只有Input 被执行时，callback会检查该元素的状态。该状态改变时，不会立马执行callback操作。比如下拉列表的选择。注意：如果你想让下拉列表选择变化后，立马会调出相应的趋势，那么可以把下拉列表的相应操作放在Input中
Output：就是callback的结果返回给哪个控件。

所以结合上面的基本信息，我们可以写出绘图callback，

Output,Input State 函数都会有两个参数，第一个是id，也就是指定元素。第二个是原色的属性，比如按钮的n_clicks属性，下拉列表的当然值value，日期选择控件的start_date和end_date。

Output(id_graph_hist_trend_graphic, 'figure'),
Input(id_button_query_trend, 'n_clicks'),
State(id_dpl_share_code, 'value'),
State(id_date_picker_range, 'start_date'),
State(id_date_picker_range, 'end_date')]

@app.callback(
    Output(id_graph_hist_trend_graphic, 'figure'),
    [Input(id_button_query_trend, 'n_clicks')],
    [State(id_dpl_share_code, 'value'),
     State(id_date_picker_range, 'start_date'),
     State(id_date_picker_range, 'end_date')]
)
def update_output_div(query, share, start, end):
    if query is not None:
        share_code = split_share_to_code(share)
        start_str = start.replace("-", "")
        end_str = end.replace("-", "")
        return plot_candlestick(
            get_trend_df(
                share_code,
                start_date=start_str,
                end_date=end_str))
    else:
        raise PreventUpdate

运行程序

只有一行代码，但是这里你可以指定IP，端口等，让网站被其他人访问。默认的网址http://127.0.0.1:8050/

if __name__ == '__main__':
    app.run_server(debug=True)

总结

作为一个入门级，适合数据分析师的网站设计示例，本示例演示如何设计一个股票历史查询网站。Plotly 以及Dash 对于数据分析来说，无疑是利器，可以不需其他前端语言完成一个酷炫的界面设计。Tushare 可以稳定的获取各种股票/金融相关的信息。

最重要的，虽然入门及其简单，但是该方案扩展能力也很强，适合快速交付成果给客户。

weixin_39951396

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
pb graph鼠标移上显示数据_数据分析手把手入门：打造自己的股票分析系统（前端不求人）...

前言数据分析很重要的一步是结果展示与汇报。无论是给客户还是上级。你可以选择PPT展示，也可以给出word文档展示，但是如果有一个交互式的网站（app）展示，无疑是更加吸引人。说起网站，很多人想到PHP，JS，但是绝大多数“数据分析师”没有这些技术，原因主要是：这完全是两个领域，精力有限的人很少会大量投入时间来精通。python中有很多优秀的开源网页设计框架，Django和Flask便是其中两个“巨...
复制链接

扫一扫