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

最新推荐文章于 2025-07-16 17:26:42 发布

原创

最新推荐文章于 2025-07-16 17:26:42 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何在Anaconda3环境中安装Plot.ly Dash，并通过Python编写代码，创建一个包含滑块交互的动态数据图。教程详细解释了组件的导入、Dash应用程序的初始化、滑块组件的配置以及回调函数的设定，展示了如何实现数据图随滑块变化的效果。

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

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

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

在 Anaconda3 5.0.0 中安装 Plot.ly Dash

http://blog.youkuaiyun.com/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<