基于Plot ly Dash 使用 Python 开发交互式互动数据图

本文链接：https://blog.csdn.net/gdfjhc/article/details/87182068

这篇博客介绍了如何在Anaconda3环境中利用Plot.ly Dash和Python开发交互式的数据图形应用。首先讲解了Plot.ly Dash的安装步骤，接着展示了如何导入必要的库，包括用于数据图和滑块的组件。然后，通过创建Dash应用程序、定义数据图和滑块组件，以及设置回调函数响应滑块变化，实现实时更新图表的功能。最后，给出了完整的源代码并邀请读者尝试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于Plot.ly Dash 使用 Python 开发交互式互动数据图

在 Anaconda3 5.0.0 中安装 Plot.ly Dash

http://blog.csdn.net/hu_zhenghui/article/details/78303032

代码分析

导入 dash

import dash
  
  
  
   
   1

导入 dash_core_components，本例中会用到 dash_core_components.Graph 用于显示数据图， dash_core_components.Slider 用于显示滑块

import dash_core_components
  
  
  
   
   1

导入 dash_html_components，本例中使用 dash_html_components.Div 包裹 dash_core_components 的元素

import dash_html_components
  
  
  
   
   1

导入 plotly

import plotly
  
  
  
   
   1

导入 numpy

import numpy
  
  
  
   
   1

从 dash 中创建一个 Dash 应用程序

app = dash.Dash()
  
  
  
   
   1

app 的类型为 dash.dash.Dash

    Type:        Dash
    String form: <dash.dash.Dash object at 0x000001DBB8F2BB70>
    File:        c:\programdata\anaconda3\lib\site-packages\dash\dash.py
    Docstring:   <no docstring>

从 dash_core_components 中创建一个 dash_core_components.Graph 数据图组件

dash_core_components.Graph(id='graph')
  
  
  
   
   1

Graph('graph')
  
  
  
   
   1

dash_core_components.Graph 的参数较多，本例只使用 id，用于后面的 dash.dependencies.Output 中的组件 id

dash_core_components.Graph?
  
  
  
   
   1

    Init signature: dash_core_components.Graph(**kwargs)
    Docstring:
    A Graph component.


    Keyword arguments:
    - id (string; required)
    - clickData (dict; optional): Data from latest click event
    - hoverData (dict; optional): Data from latest hover event
    - clear_on_unhover (boolean; optional): If True, clear_on_unhover will clear the hoverData property
    when the user "unhovers" from a point.
    If False, then the hoverData property will be equal to the
    data from the last point that was hovered over.
    - selectedData (dict; optional): Data from latest select event
    - relayoutData (dict; optional): Data from latest relayout event which occurs
    when the user zooms or pans on the plot
    - figure (dict; optional): Plotly figure object. See schema:
    https://plot.ly/javascript/reference
    - style (dict; optional): Generic style overrides on the plot div
    - className (string; optional): className of the parent div
    - animate (boolean; optional): Beta: If true, animate between updates using
    plotly.js's animate function
    - animation_options (dict; optional): Beta: Object containing animation settings.
    Only applies if animate is true
    - config (optional): Plotly.js config options.
    See https://plot.ly/javascript/configuration-options/
    for more info.. config has the following type: dict containing keys 'staticPlot', 'editable', 'edits', 'autosizable', 'queueLength', 'fillFrame', 'frameMargins', 'scrollZoom', 'doubleClick', 'showTips', 'showAxisDragHandles', 'showAxisRangeEntryBoxes', 'showLink', 'sendData', 'linkText', 'displayModeBar', 'modeBarButtonsToRemove', 'modeBarButtonsToAdd', 'modeBarButtons', 'displaylogo', 'plotGlPixelRatio', 'topojsonURL', 'mapboxAccessToken'.
    Those keys have the following types:
      - staticPlot (boolean; optional): no interactivity, for export or image generation
      - editable (boolean; optional): we can edit titles, move annotations, etc - sets all pieces of edits
    unless a separate edits config