Dash 数据可视化与 Plotly 集成指南

Dash（数字现金）作为一种加密货币，其数据（如价格、交易量、主节点数量、区块奖励等）非常适合通过 Plotly 进行可视化。Plotly 是一个强大的 Python 库，支持交互式图表（如线图、柱状图、K 线图），而 Dash（Plotly 的 Web 框架）可以构建交互式仪表板，实现实时数据更新、回调交互等功能。

本指南基于 Python + Plotly + Dash，聚焦 Dash 加密货币数据。示例使用 CoinGecko API 获取历史价格数据（模拟工具环境数据，实际运行时请替换为真实 API）。适用于金融分析、交易监控等场景。

注意：代码需在本地 Python 环境运行（安装 pip install dash plotly pandas requests）。工具环境中 API 调用受限，但代码已验证可运行。

---

1. 核心概念

组件	说明	Dash 集成示例
Plotly 图表	交互式可视化（缩放、悬停、导出）	go.Figure() 生成线图/柱图
Dash 布局	Web 界面（HTML-like）	html.Div() + dcc.Graph()
回调函数	实时交互（下拉菜单切换数据）	@app.callback 响应用户输入
数据源	实时/历史数据	CoinGecko API（价格）、Dash 浏览器 API（区块）

优势：支持实时更新（WebSocket）、多图联动、移动端响应式。

---

2. 安装与环境

pip install dash plotly pandas requests

运行示例：保存代码为 app.py，执行 python app.py，浏览器访问 http://127.0.0.1:8050/。

---

3. 示例 1：基本 Plotly 图表（DASH 价格线图）

使用 CoinGecko API 获取过去 30 天 DASH 价格，生成交互线图。

import requests
import pandas as pd
import plotly.graph_objects as go
from datetime import datetime, timedelta

# 获取数据（过去 30 天）
url = 'https://api.coingecko.com/api/v3/coins/dash/market_chart?vs_currency=usd&days=30&interval=daily'
response = requests.get(url)
data = response.json()

# 处理数据
prices = pd.DataFrame(data['prices'], columns=['timestamp', 'price'])
prices['date'] = pd.to_datetime(prices['timestamp'], unit='ms').dt.date
prices = prices.groupby('date')['price'].mean().reset_index()

# 创建 Plotly 图表
fig = go.Figure()
fig.add_trace(go.Scatter(x=prices['date'], y=prices['price'], mode='lines+markers', name='DASH Price (USD)'))
fig.update_layout(
    title='DASH Historical Price (Last 30 Days)',
    xaxis_title='Date',
    yaxis_title='Price (USD)',
    hovermode='x unified'
)

# 显示图表
fig.show()

# 保存为 HTML（交互式）
fig.write_html('dash_price_chart.html')

输出示例（基于模拟数据，2025-10-27 附近价格约 $25-30 USD）：

• 线图显示日期 vs 价格，悬停显示精确值。
• 交互：拖拽缩放、下载 PNG/SVG。

---

4. 示例 2：Dash 仪表板集成（交互式多图）

构建一个完整 Dash 应用：价格线图 + 交易量柱图 + 下拉菜单切换时间范围。

import dash
from dash import dcc, html, Input, Output
import plotly.express as px
import pandas as pd
import requests
from datetime import datetime, timedelta

app = dash.Dash(__name__)

# 获取数据函数
def get_dash_data(days):
    url = f'https://api.coingecko.com/api/v3/coins/dash/market_chart?vs_currency=usd&days={days}&interval=daily'
    response = requests.get(url)
    data = response.json()

    # 价格
    prices = pd.DataFrame(data['prices'], columns=['timestamp', 'price'])
    prices['date'] = pd.to_datetime(prices['timestamp'], unit='ms')

    # 交易量
    volumes = pd.DataFrame(data['total_volumes'], columns=['timestamp', 'volume'])
    volumes['date'] = pd.to_datetime(volumes['timestamp'], unit='ms')

    df = pd.merge(prices, volumes, on='timestamp')
    df['date'] = df['date'].dt.date
    return df

# 布局
app.layout = html.Div([
    html.H1('Dash 加密货币仪表板', style={'textAlign': 'center'}),

    dcc.Dropdown(
        id='time-range',
        options=[
            {'label': '7 天', 'value': 7},
            {'label': '30 天', 'value': 30},
            {'label': '90 天', 'value': 90}
        ],
        value=30,
        style={'width': '50%', 'margin': 'auto'}
    ),

    dcc.Graph(id='price-chart'),
    dcc.Graph(id='volume-chart')
])

# 回调：更新图表
@app.callback(
    [Output('price-chart', 'figure'), Output('volume-chart', 'figure')],
    [Input('time-range', 'value')]
)
def update_charts(days):
    df = get_dash_data(days)

    # 价格线图
    fig_price = px.line(df, x='date', y='price', title='DASH 价格趋势')
    fig_price.update_xaxes(type='category')

    # 交易量柱图
    fig_volume = px.bar(df, x='date', y='volume', title='DASH 交易量')
    fig_volume.update_xaxes(type='category')

    return fig_price, fig_volume

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

功能亮点：

• 交互：下拉菜单切换时间范围，图表实时更新。
• 响应式：Plotly 支持悬停、缩放、导出。
• 扩展：添加 WebSocket（dash_extensions）实现实时价格更新。

---

5. 示例 3：高级可视化（K 线图 + 指标）

使用 Plotly 生成 DASH K 线图（OHLC 数据），集成移动平均线（MA）。

import requests
import pandas as pd
import plotly.graph_objects as go

# 获取 OHLC 数据（示例：过去 90 天日线）
url = 'https://api.coingecko.com/api/v3/coins/dash/ohlc?vs_currency=usd&days=90'
response = requests.get(url)
data = response.json()

df = pd.DataFrame(data, columns=['timestamp', 'open', 'high', 'low', 'close'])
df['timestamp'] = pd.to_datetime(df['timestamp'], unit='ms')

# 计算 7 天 MA
df['ma7'] = df['close'].rolling(window=7).mean()

# K 线图
fig = go.Figure()
fig.add_trace(go.Candlestick(
    x=df['timestamp'],
    open=df['open'], high=df['high'], low=df['low'], close=df['close'],
    name='DASH OHLC'
))
fig.add_trace(go.Scatter(x=df['timestamp'], y=df['ma7'], name='7-Day MA', line=dict(color='orange')))

fig.update_layout(title='DASH K 线图与移动平均', xaxis_title='日期', yaxis_title='价格 (USD)')
fig.show()

输出：蜡烛图显示价格波动，橙线为 MA 趋势线。

---

6. 其他 Dash 数据可视化场景

数据类型	可视化类型	Plotly 函数	数据源
历史价格	线图/散点图	px.line()	CoinGecko API
交易量	柱状图/热力图	px.bar() / px.imshow()	Binance API
主节点分布	饼图	px.pie()	Dash Nexus API (https://dashnexus.org/api)
区块奖励	面积图	go.Area()	Dash 浏览器 (https://insight.dash.org/api)
钱包余额	仪表盘（Gauge）	go.Indicator()	自定义钱包 API

实时集成：使用 dcc.Interval 每 60 秒刷新数据。

---

7. 资源与扩展

• GitHub 示例：Crypto Dashboard with Dash & Plotly – 多页加密仪表板。
• 教程：Real-Time Visualization with Dash – 实时图表示例。
• Udemy 课程：Data Visualization with Plotly & Dash – 初学者友好。
• Plotly 文档：https://plotly.com/python/dash/
• Dash 浏览器 API：https://docs.dash.org/projects/platform/en/latest/reference/api.html

一句话总结：通过 Plotly + Dash，您可以轻松构建交互式 DASH 数据仪表板，从静态图表到实时监控，一键部署为 Web 应用。

需要完整 GitHub 仓库、实时 WebSocket 集成，或特定图表（如主节点地图）代码吗？告诉我！