The dash_core_components library includes a component called Graph.
主要是讲各种图形

1.概述

  1. **dash_core_components** 库包含一个叫 Graph 的组件；
  2. **Graph** 组件使用开源的**plotly.js** (JavaScript图形库) 渲染交互式数据的可视化；
  3. **Plotly.js** 支持超过35种数据图，可以生成高清的SVG矢量图和高性能的WebGL图；
  4. **dcc.Graph** 组件的 figure 与 **Plotly.py**的 figure 使用一样的参数。详情可参阅plotly.py文档与图库；
  5. **Dash** 组件由一组属性以声明方式进行描述，所有这些属性都可以通过回调函数进行更新。有些属性还可以通过用户交互进行更新，比如，点选下拉按钮 **dcc.Dropdown** 组件的选项，该组件的属性 **value** 值就会改变；
  6. **dcc.Graph** 组件有四个属性，可以通过用户交互进行更新：鼠标悬停(**hoverData**)、单击(**clickData**)、选择区域数据(**selectedData**)、更改布局(**relayoutData**)。
    ```python import json import dash import dash_core_components as dcc import dash_html_components as html from dash.dependencies import Input, Output import plotly.express as px import pandas as pd

app = dash.Dash(name)

styles = dict(pre = dict(border = ‘thin lightgrey solid’, overflowX = ‘scroll’)) app.layout = html.Div([ dcc.Graph( id = ‘basic-interactions’, figure = dict(data = [dict(x = [1, 2, 3, 4], y = [4, 1, 3, 5], text = [‘a’, ‘b’, ‘c’, ‘d’], customdata = [‘c.a’, ‘c.b’, ‘c.c’, ‘c.d’], name = ‘trace01’, mode = ‘markers’, marker = dict(size = 12)), dict(x = [1, 2, 3, 4], y = [9, 4, 1, 4], text = [‘w’, ‘x’, ‘y’, ‘z’], customdata = [‘c.w’, ‘c.x’, ‘c.y’, ‘c.z’], name = ‘trace02’, mode = ‘markers’, marker = dict(size = 12))], layout = dict(clickmode = ‘event+select’))), html.Div(className = ‘row’, children = [ html.Div(className = ‘three columns’, children = [ dcc.Markdown(d(“”” 一、悬停数据

  1.                               将鼠标悬停在图中的值上。
  2.                               """)),
  3.                           html.Pre(id = 'hover-data', style = styles['pre'])]),
  4.              html.Div(className = 'three columns',
  5.                       children = [
  6.                           dcc.Markdown(d("""
  7.                               **二、点击数据**
  9.                               用鼠标点击图上的点。
  10.                               """)),
  11.                           html.Pre(id = 'click-data', style = styles['pre'])]),
  12.              html.Div(className = 'three columns',
  13.                       children = [
  14.                           dcc.Markdown(d("""
  15.                               **三、选择数据**
  17.                               使用菜单的套索或方框工具，选择图上的点。
  19.                               请注意：如果layout.clickmode ='event + select'，
  20.                               若单击的同时按住shift键，则选择数据的同时，也会累计或取消累计所选的数据。
  21.                               """)),
  22.                           html.Pre(id = 'selected-data', style = styles['pre'])]),
  23.              html.Div(className = 'three columns',
  24.                       children = [
  25.                           dcc.Markdown(d("""
  26.                               **四、缩放与改变数据布局**
  28.                               在图形上点击并拖拽，
  29.                               或点击图形菜单的缩放按钮实现缩放。
  30.                               点击图例也可以激活此事件。
  31.                               """)),
  32.                           html.Pre(id = 'relayout-data', style = styles['pre'])])
  33.          ]
  34. )

])

@app.callback(Output(‘hover-data’, ‘children’), [Input(‘basic-interactions’, ‘hoverData’)]) def display_hover_data(hoverData): return json.dumps(hoverData, indent = 2)

@app.callback(Output(‘click-data’, ‘children’), [Input(‘basic-interactions’, ‘clickData’)]) def display_click_data(clickData): return json.dumps(clickData, indent = 2)

@app.callback(Output(‘selected-data’, ‘children’), [Input(‘basic-interactions’, ‘selectedData’)]) def display_selected_data(selectedData): return json.dumps(selectedData, indent = 2)

@app.callback(Output(‘relayout-data’, ‘children’), [Input(‘basic-interactions’, ‘relayoutData’)]) def display_repayout_data(relayoutData): return json.dumps(relayoutData, indent = 2)

if name == ‘main‘: app.run_server(debug=True)

  1. > ![](https://cdn.nlark.com/yuque/0/2021/webp/2610909/1614333353010-74b0db1e-2e29-40de-81bd-f65a4354b81f.webp#align=left&display=inline&height=644&margin=%5Bobject%20Object%5D&originHeight=644&originWidth=602&size=0&status=done&style=none&width=602)
  2. > 
  4. <a name="AJQLI"></a>
  5. # 2.悬停时更新图表
  6. ```python
  7. import arrow as ar
  8. import numpy as np
  9. import pandas as pd
  10. import json
  11. from textwrap import dedent as d
  12. import plotly.graph_objs as go
  13. import dash
  14. import dash_core_components as dcc                  # 交互式组件
  15. import dash_html_components as html                 # 代码转html
  16. from dash.dependencies import Input, Output, State  # 回调
  17. from jupyter_plotly_dash import JupyterDash         # Jupyter中的Dash
  18. import ipywidgets as widgets                        # Jupyter的滑动条插件
  20. df = pd.read_csv(
  21.     'https://gist.githubusercontent.com/chriddyp/'
  22.     'cb5392c35661370d95f300086accea51/raw/'
  23.     '8e0768211f6b747c0db42a9ce9a0937dafcbd8b2/'
  24.     'indicators.csv')
  26. app = JupyterDash('update_graph_id', width = 1000, height = 960)
  27. app.layout = html.Div([
  29.     # 设置2个下拉按钮、4个单选按钮
  30.     html.Div([
  31.         html.Div([
  32.             dcc.Dropdown(
  33.                 id = 'crossfilter-xaxis-column',
  34.                 options = [{'label': i, 'value': i} for i in df['Indicator Name'].unique()],
  35.                 value = 'Fertility rate, total (births per woman)'),
  36.             dcc.RadioItems(
  37.                 id = 'crossfilter-xaxis-type',
  38.                 options = [{'label': i, 'value': i} for i in ['线性', '日志']],
  39.                 value = '线性',
  40.                 labelStyle = dict(display = 'inline-block'))],
  41.             style = dict(width = '49%', display = 'inline-block')),
  43.         html.Div([
  44.             dcc.Dropdown(
  45.                 id = 'crossfilter-yaxis-column',
  46.                 options = [{'label': i, 'value': i} for i in df['Indicator Name'].unique()],
  47.                 value = 'Life expectancy at birth, total (years)'),
  48.             dcc.RadioItems(
  49.                 id = 'crossfilter-yaxis-type',
  50.                 options = [{'label': i, 'value': i} for i in ['线性', '日志']],
  51.                 value = '线性',
  52.                 labelStyle = dict(display = 'inline-block'))],
  53.             style = dict(width = '49%', display = 'inline-block', float = 'right'))],
  55.         style = dict(borderBottom = 'thin lightgrey solid', 
  56.                      backgroundColor = 'rgb(250, 250, 250)', padding = '10px 5px')),
  58.     # 设置交互数据对象及默认值
  59.     html.Div([
  60.         dcc.Graph(
  61.             id = 'crossfilter-indicator-scatter',
  62.             hoverData = dict(points = [{'customdata': 'Japan'}]))],
  63.         style = dict(width = '49%', display = 'inline-block', padding = '0 20')),
  65.     # 设置交互的子图表
  66.     html.Div([
  67.         dcc.Graph(id = 'x-time-series'),
  68.         dcc.Graph(id = 'y-time-series')],
  69.         style = dict(width = '49%', display = 'inline-block')),
  71.     # 设置日期滑动条
  72.     html.Div(
  73.         dcc.Slider(
  74.             id = 'crossfilter-year--slider',
  75.             min = df['Year'].min(),
  76.             max = df['Year'].max(),
  77.             value = df['Year'].max(),
  78.             marks = {str(y): str(y) for y in df['Year'].unique()}),
  79.         style = dict(widht = '49%', padding = '0px 20px 20px 20px')
  80.     )
  81. ])
  84. # 回调2个下拉按钮 + 4个单选按钮
  85. @app.callback(
  86.     Output('crossfilter-indicator-scatter', 'figure'),
  87.     [Input('crossfilter-xaxis-column', 'value'),
  88.      Input('crossfilter-yaxis-column', 'value'),
  89.      Input('crossfilter-xaxis-type', 'value'),
  90.      Input('crossfilter-yaxis-type', 'value'),
  91.      Input('crossfilter-year--slider', 'value')])
  92. def update_graph(xaxis_column_name, yaxis_column_name, xaxis_type, yaxis_type, year_value):
  93.     dff = df[df['Year'] == year_value]
  95.     return dict(
  96.         data = [go.Scatter(
  97.             x = dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
  98.             y = dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
  99.             text = dff[dff['Indicator Name'] == yaxis_column_name]['Country Name'],
  100.             customdata = dff[dff['Indicator Name'] == yaxis_column_name]['Country Name'],
  101.             mode = 'markers',
  102.             marker = dict(size = 15, opacity = 0.5, line = dict(width = 0.5, color = 'white')))],
  104.         layout = dict(
  105.             xaxis = dict(title = xaxis_column_name, type = 'linear' if xaxis_type == '线性' else '日志'),
  106.             yaxis = dict(title = yaxis_column_name, type = 'linear' if yaxis_type == '线性' else '日志'),
  107.             margin = {'l': 40, 'b': 30, 't': 10, 'r': 0}, height=720, hovermode = 'closest'
  108.         )
  109.     )
  111. # 设置子图表
  112. def create_time_series(df, axis_type, title):
  113.     return dict(
  114.         data = [go.Scatter(
  115.             x = df['Year'],
  116.             y = df['Value'],
  117.             mode = 'lines+markers')],
  118.         layout = dict(
  119.             height = 360, margin = {'l': 20, 'b': 30, 't': 10, 'r': 10}, 
  120.             xaxis = dict(showgrid = False),
  121.             yaxis = dict(type = 'linear' if axis_type == '线性' else '日志'),
  122.             annotations = [
  123.                 dict(x = 0, y = 0.85, text = title, 
  124.                      showarrow = False, align = 'left', 
  125.                      bgcolor = 'rgba(255, 255, 255, 0.5)', 
  126.                      xref = 'paper', yref = 'paper', 
  127.                      xanchor = 'left', yanchor = 'bottom')]
  128.         )
  129.     )
  131. # 回调--设置上子图表的交互
  132. @app.callback(
  133.     Output('x-time-series', 'figure'),
  134.     [Input('crossfilter-indicator-scatter', 'hoverData'),
  135.      Input('crossfilter-xaxis-column', 'value'),
  136.      Input('crossfilter-xaxis-type', 'value')])
  137. def update_y_timeseries(hoverData, xaxis_column_name, axis_type):
  138.     country_name = hoverData['points'][0]['customdata']
  139.     dff = df[df['Country Name'] == country_name]
  140.     dff = dff[dff['Indicator Name'] == xaxis_column_name]
  141.     title = f"<b>{country_name}</b><br>{xaxis_column_name}"
  142.     return create_time_series(dff, axis_type, title)
  144. # 回调--设置下子图表的交互
  145. @app.callback(
  146.     Output('y-time-series', 'figure'),
  147.     [Input('crossfilter-indicator-scatter', 'hoverData'),
  148.      Input('crossfilter-yaxis-column', 'value'),
  149.      Input('crossfilter-yaxis-type', 'value')])
  150. def update_x_timeseries(hoverData, yaxis_column_name, axis_type):
  151.     dff = df[df['Country Name'] == hoverData['points'][0]['customdata']]
  152.     dff = dff[dff['Indicator Name'] == yaxis_column_name]
  153.     return create_time_series(dff, axis_type, yaxis_column_name)
  155. app

13819693-f74e21a4f95c25f0[1].gif

3.交叉过滤

  1. # 数据源
  2. np.random.seed(0)    # 使每次生成的随机数相同
  3. df = pd.DataFrame({f"Column {i}": np.random.rand(30) + i*10 for i in range(6)})
  5. app = JupyterDash('Cross_filter_id', width = 1000)
  6. app.layout = html.Div(
  7.     className = 'row',
  8.     children = [
  9.         html.Div(dcc.Graph(id = 'g1', config = dict(displayModeBar = False)), className = 'four columns'),
  10.         html.Div(dcc.Graph(id = 'g2', config = dict(displayModeBar = False)), className = 'four columns'),
  11.         html.Div(dcc.Graph(id = 'g3', config = dict(displayModeBar = False)), className = 'four columns'),
  12.     ]
  13. )
  15. # high_light为返回函数的函数
  16. def high_light(x, y):
  18.     def callback(*selectedDatas):
  19.         selectedpoints = df.index
  20.         # 按选定的点，从Dataframe中过滤数据
  21.         for i, selected_data in enumerate(selectedDatas):
  22.             if selected_data is not None:
  23.                 selected_index = [p['customdata'] for p in selected_data['points']]
  24.                 if len(selected_index) > 0:
  25.                     selectedpoints = np.intersect1d(selectedpoints, selected_index)
  27.         # 设置图表
  28.         fig = dict(
  29.             data = [dict(
  30.                 x = df[x], y = df[y], text = df.index, textposition = 'top', selectedpoints = selectedpoints, 
  31.                 customdata = df.index, type = 'scatter', mode = 'markers+text', 
  32.                 textfont = dict(color = 'rgba(30, 30, 30, 1)'),
  33.                 marker = dict(color = 'rgba(0, 116, 217, 0.7)', size = 12, 
  34.                               line = dict(color = 'rgb(0, 116, 217)', width = 0.5)),
  35.                 unselected = dict(marker = dict(opacity = 0.3), textfont = dict(color = 'rgba(0, 0, 0, 0)'))
  36.             )], # 使未选择的透明
  38.             layout = dict(clickmode = 'event+select', showlegend = False, hovermode = 'closest', height = 230,
  39.                           margin = {'l': 15, 'r': 0, 'b': 15, 't': 5}, dragmode = 'select')
  40.         )
  42.         # 将矩形显示到先前选定的区域
  43.         shape = dict(type = 'rect', line = dict(width = 1, dash = 'dot', color = 'darkgrey'))
  44.         if selectedDatas[0] and selectedDatas[0]['range']:
  45.             fig['layout']['shapes'] = [dict({
  46.                 'x0': selectedDatas[0]['range']['x'][0],
  47.                 'x1': selectedDatas[0]['range']['x'][1],
  48.                 'y0': selectedDatas[0]['range']['y'][0],
  49.                 'y1': selectedDatas[0]['range']['y'][1]}, 
  50.                 **shape)]
  51.         else:
  52.             fig['layout']['shapes'] = [dict({
  53.                 'type': 'rect',
  54.                 'x0': np.min(df[x]),
  55.                 'x1': np.max(df[x]),
  56.                 'y0': np.min(df[y]),
  57.                 'y1': np.max(df[y])},
  58.                 **shape)]
  59.         return fig
  61.     return callback
  63. # app.callback是一个装饰器
  64. app.callback(
  65.     Output('g1', 'figure'),
  66.     [Input('g1', 'selectedData'),
  67.      Input('g2', 'selectedData'),
  68.      Input('g3', 'selectedData')]
  69. )(high_light('Column 0', 'Column 1'))
  71. app.callback(
  72.     Output('g2', 'figure'),
  73.     [Input('g2', 'selectedData'),
  74.      Input('g1', 'selectedData'),
  75.      Input('g3', 'selectedData')]
  76. )(high_light('Column 2', 'Column 3'))
  78. app.callback(
  79.     Output('g3', 'figure'),
  80.     [Input('g3', 'selectedData'),
  81.      Input('g1', 'selectedData'),
  82.      Input('g2', 'selectedData')]
  83. )(high_light('Column 4', 'Column 5'))
  85. app

13819693-f501e6a2bdc36229[1].gif

  • 示例是对由6列数据集，两两组成的3个散点图表，进行交叉筛选的通用示例。对单个散点图进行选择数据区域(或单击)，则另外2个散点图会仅显示筛选的数据；
  • 对多维数据集进行筛选和可视化，最好选用平行坐标图的方式。

    4.Dash交互局限性

  1. 点击图上的点不能累加：不能累加已经点击的图点数量，也不支持对某个图点进行反选；
  2. 目前还不能自定义悬停交互及选择框的样式。