如何在Bokeh气候时间序列图表中添加可点击的原始数据链接？

针对你的需求，完全可以将可点击URL嵌入图表标题或角落标签中，以下是基于主流网页图表工具的具体实现方案：

方案1：Plotly（交互式图表首选） #

Plotly支持在布局元素中直接嵌入HTML链接，适合批量生成带交互的时间序列图表：

可点击标题实现 #

import plotly.graph_objects as go

# 示例时间序列数据
fig = go.Figure(data=go.Scatter(x=range(2000,2024), y=[14.2,14.3,14.5,14.7,14.9,15.1,15.3,15.5,15.6,15.8,15.9,16.0,16.2,16.3,16.4,16.5,16.6,16.7,16.8,16.9,17.0,17.1,17.2,17.3]))
# 每个图表替换为对应的原始数据URL
raw_data_url = "https://example.com/global-temp-raw-data"

fig.update_layout(
    title=f'<a href="{raw_data_url}" target="_blank" rel="noopener noreferrer">全球年平均气温时间序列（点击查看原始数据）</a>',
    title_x=0.5,  # 标题居中
    xaxis_title="年份",
    yaxis_title="气温(℃)"
)
# 导出为可直接嵌入网站的HTML文件
fig.write_html("global_temp_chart.html")

角落标签实现（以右下角为例） #

fig.add_annotation(
    text=f'<a href="{raw_data_url}" target="_blank" rel="noopener noreferrer">查看原始数据</a>',
    xref="paper", yref="paper",  # 基于图表画布定位
    x=0.95, y=0.02,  # 右下角坐标
    showarrow=False,
    font=dict(size=10, color="#0066cc")
)

方案2：静态图表（Matplotlib/Seaborn）+ HTML容器 #

如果是生成静态图片后嵌入网站，可通过HTML容器给标题或角落添加独立链接：

<div class="chart-wrapper" style="position: relative; width: 800px; margin: 20px auto;">
    <!-- 可点击标题 -->
    <h3 style="text-align: center;">
        <a href="https://example.com/arctic-sea-ice-data" target="_blank" rel="noopener noreferrer">北极海冰面积时间序列</a>
    </h3>
    <!-- 静态图表图片 -->
    <img src="arctic_sea_ice.png" alt="北极海冰面积时间序列" style="width: 100%;">
    <!-- 右下角悬浮链接 -->
    <div style="position: absolute; bottom: 5px; right: 10px;">
        <a href="https://example.com/arctic-sea-ice-data" target="_blank" rel="noopener noreferrer" style="font-size: 12px; color: #0066cc;">原始数据</a>
    </div>
</div>

方案3：D3.js（高度自定义交互式图表） #

如果需要完全自定义图表样式，可直接在SVG中添加可点击元素：

const svg = d3.select("#co2-chart")
    .attr("width", 800)
    .attr("height", 400);

const rawDataUrl = "https://example.com/co2-concentration-data";

// 添加可点击标题
svg.append("a")
    .attr("xlink:href", rawDataUrl)
    .attr("target", "_blank")
    .attr("rel", "noopener noreferrer")
    .append("text")
    .attr("x", 400)
    .attr("y", 30)
    .style("text-anchor", "middle")
    .style("font-size", "16px")
    .text("全球CO₂浓度时间序列（点击查看原始数据）");

// 添加右下角链接标签
svg.append("a")
    .attr("xlink:href", rawDataUrl)
    .attr("target", "_blank")
    .attr("rel", "noopener noreferrer")
    .append("text")
    .attr("x", 790)
    .attr("y", 390)
    .style("text-anchor", "end")
    .style("font-size", "12px")
    .style("fill", "#0066cc")
    .text("原始数据");

// 绘制时间序列逻辑（省略）

关键注意事项 #

• 所有链接添加rel="noopener noreferrer"，避免跳转页面获取当前站点控制权，提升安全性
• 统一链接样式（比如蓝色、下划线），让用户清晰识别可点击元素
• 批量生成时，可通过脚本（Python循环/JS模板引擎）自动为每个图表插入对应URL，减少重复操作

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