如何通过Greasemonkey脚本或UI工具导出MLflow图表的(x,y)坐标数据？

Greasemonkey/Tampermonkey脚本方案（完全可行） #

MLflow的图表基于Plotly实现，所有数据点的(x,y)信息都会加载到前端浏览器中，不需要访问后端数据库就能提取。用用户脚本可以一键导出CSV，具体实现步骤如下：

1. 安装Tampermonkey（兼容性优于Greasemonkey）浏览器扩展
2. 创建新用户脚本，粘贴以下代码：

// ==UserScript==
// @name         MLflow Chart Data Exporter
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Export (x,y) points from MLflow charts to CSV
// @match        *://*/mlflow/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 添加悬浮导出按钮
    const exportBtn = document.createElement('button');
    exportBtn.textContent = 'Export Chart Data';
    exportBtn.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 8px 16px;
        background: #2196F3;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        z-index: 9999;
        font-size: 14px;
    `;
    document.body.appendChild(exportBtn);

    exportBtn.addEventListener('click', () => {
        const plotlyDiv = document.querySelector('.plotly-graph-div');
        if (!plotlyDiv) {
            alert('未找到MLflow图表');
            return;
        }

        const plotData = Plotly.getData(plotlyDiv);
        if (!plotData.length) {
            alert('图表中无数据点');
            return;
        }

        // 处理单条曲线（多条曲线可循环遍历plotData）
        const trace = plotData[0];
        const csvRows = trace.x.map((xVal, idx) => `${xVal},${trace.y[idx]}`);
        const csvContent = `x,y\n${csvRows.join('\n')}`;

        // 触发下载
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const downloadLink = document.createElement('a');
        downloadLink.href = URL.createObjectURL(blob);
        downloadLink.download = `mlflow-data-${new Date().toISOString().slice(0,10)}.csv`;
        downloadLink.click();
    });
})();

3. 打开MLflow图表页面，点击右上角的「Export Chart Data」按钮即可下载CSV

脚本注意事项 #

• 如果图表有多条曲线（多个trace），可以修改脚本循环plotData数组，将所有trace的数据合并到CSV中
• 确保图表完全加载后再点击按钮，避免因DOM未渲染导致找不到元素

其他无需写代码的UI工具方案 #

• Plotly原生导出：MLflow图表右上角通常有一个隐藏的下载菜单（鼠标悬停图表时显示），点击后选择「Download CSV」即可直接导出数据
• 浏览器控制台提取：按F12打开控制台，输入以下命令获取数据，复制后粘贴到表格软件保存为CSV：

const data = Plotly.getData(document.querySelector('.plotly-graph-div'))[0];
console.log(data.x.map((x,i) => `${x},${data.y[i]}`).join('\n'));

• Chrome扩展：安装「Export Chart Data」类扩展，支持一键提取Plotly、D3等主流图表库的数据，无需手动操作

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