如何用Python实现类似谷歌股票线图的拖拽差值展示功能？

PyQtgraph默认支持鼠标左键拖拽平移视图，正好匹配你要的谷歌股票页面拖拽功能，同时我们可以添加实时显示当前数值和百分比变化的模块，以下是完整实现代码：

import sys
import numpy as np
import pandas as pd
import pyqtgraph as pg
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel

# 生成模拟数据（和你提供的一致）
np.random.seed(0)
x = np.random.randn(2000)
y = np.cumsum(x)
df = pd.DataFrame(y, columns=['value'])
# 取第一个点作为基准值计算百分比变化
base_value = df['value'].iloc[0]

class StockPlot(QWidget):
    def __init__(self):
        super().__init__()
        self.init_ui()
        
    def init_ui(self):
        self.setWindowTitle('拖拽平移股票线图')
        self.layout = QVBoxLayout()
        
        # 创建绘图部件
        self.plot_widget = pg.PlotWidget()
        self.layout.addWidget(self.plot_widget)
        
        # 绘制曲线
        self.curve = self.plot_widget.plot(df['value'].values, pen=pg.mkPen(color='blue', width=2))
        
        # 配置拖拽规则：仅允许X轴左右拖拽
        self.plot_widget.setMouseEnabled(x=True, y=False)
        # 初始显示前200个数据点
        self.plot_widget.setRange(xRange=[0, 200], padding=0)
        
        # 添加数值显示标签
        self.value_label = QLabel('当前值: -- | 变化百分比: --')
        self.layout.addWidget(self.value_label)
        
        # 监听鼠标移动事件，实时更新数值
        self.plot_widget.scene().sigMouseMoved.connect(self.update_value_display)
        
        self.setLayout(self.layout)
        
    def update_value_display(self, pos):
        # 将鼠标位置转换为绘图区域的坐标
        mouse_point = self.plot_widget.plotItem.vb.mapSceneToView(pos)
        x_index = int(mouse_point.x())
        
        # 确保索引在有效范围内
        if 0 <= x_index < len(df['value']):
            current_value = df['value'].iloc[x_index]
            change_percent = ((current_value - base_value) / base_value) * 100
            self.value_label.setText(f'当前值: {current_value:.2f} | 变化百分比: {change_percent:.2f}%')
        else:
            self.value_label.setText('当前值: -- | 变化百分比: --')

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = StockPlot()
    window.show()
    sys.exit(app.exec_())

关键功能说明 #

• 拖拽平移控制：通过setMouseEnabled(x=True, y=False)限制仅能左右拖拽，避免误操作上下移动视图
• 初始视图范围：setRange(xRange=[0,200])让页面默认显示部分数据，和谷歌股票页面逻辑一致
• 实时数值更新：监听鼠标移动信号，将鼠标坐标转换为数据索引，计算当前值和相对于初始值的百分比变化，同步更新标签内容
• 拖拽同步更新：PyQtgraph拖拽时会自动刷新视图，鼠标移动的监听信号会实时触发，拖拽过程中数值会同步变化

内容的提问来源于stack exchange，提问作者Saeed