Bokeh项目实战：使用CustomJSTransform实现股票价格归一化可视化-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01195/article/details/148374830

Bokeh项目实战：使用CustomJSTransform实现股票价格归一化可视化

bokeh bokeh/bokeh: 是一个用于创建交互式图形和数据的 Python 库。适合用于数据可视化、数据分析和呈现，以及创建动态的 Web 应用。特点是提供了一种简洁、直观的 API 来描述和处理数据，并生成交互式的可视化效果。项目地址: https://gitcode.com/gh_mirrors/bo/bokeh

概述

本文将深入讲解如何利用Bokeh可视化库中的CustomJSTransform功能，实现股票收盘价的归一化处理与可视化展示。通过这个案例，您将掌握Bokeh中自定义JavaScript转换的核心技术。

核心概念解析

1. 数据归一化

归一化是数据分析中常用的预处理技术，它将不同量纲的数据转换到同一尺度。在本例中，我们将股票价格归一化为相对于首日收盘价的比值，这样可以更直观地比较不同股票的价格变化趋势。

2. CustomJSTransform

CustomJSTransform是Bokeh提供的一个强大功能，允许开发者使用JavaScript代码自定义数据转换逻辑。这种转换在浏览器端执行，能够实现高效的数据处理。

代码实现详解

1. 数据准备

首先导入必要的库并加载示例数据：

import numpy as np
from bokeh.models import ColumnDataSource, CustomJSTransform
from bokeh.plotting import figure, show
from bokeh.sampledata.stocks import AAPL, GOOG
from bokeh.transform import transform

2. 创建绘图对象

设置一个带时间轴的绘图区域：

plot = figure(x_axis_type="datetime", title="Normalized Stock Closing Prices",
              width=800, height=350)

3. 数据源配置

使用ColumnDataSource组织数据，这是Bokeh高效渲染的关键：

aapl_source = ColumnDataSource(data=dict(
    aapl_date=datetime(AAPL['date']),
    aapl_close=AAPL['adj_close'],
))

goog_source = ColumnDataSource(data=dict(
    goog_date=datetime(GOOG['date']),
    goog_close=GOOG['adj_close'],
))

4. 自定义JavaScript转换

核心部分：定义归一化转换逻辑：

v_func = """
    const first = xs[0]
    const norm = new Float64Array(xs.length)
    for (let i = 0; i < xs.length; i++) {
        norm[i] = xs[i] / first
    }
    return norm
"""
normalize = CustomJSTransform(v_func=v_func)

这段JavaScript代码实现了：

获取数组第一个元素作为基准值
创建新的Float64Array存储结果
遍历数组，计算每个元素与基准值的比值

5. 绘制归一化曲线

应用自定义转换绘制归一化后的股票价格曲线：

plot.line(x='aapl_date', y=transform('aapl_close', normalize), line_width=2,
        color='#cf3c4d', alpha=0.6, legend_label="Apple", source=aapl_source)
plot.line(x='goog_date', y=transform('goog_close', normalize), line_width=2,
        color='#2f7bce', alpha=0.6, legend_label="Google", source=goog_source)

6. 图表美化

添加各种视觉元素提升图表可读性：

plot.background_fill_color = "#f0f0f0"
plot.xgrid.grid_line_color = None
plot.ygrid.grid_line_color = "black"
plot.ygrid.grid_line_alpha = 0.1
plot.xaxis.axis_label = 'Date'
plot.yaxis.axis_label = 'Normalized Price'
plot.legend.location='top_left'