如何修复TradingView saved_data中保存的颜色主题Bug

问题根源 #

saved_data里包含了图表的主题样式配置，切换应用主题后加载旧数据，会导致旧主题配置覆盖当前主题，引发样式冲突或功能异常。

可行解决方案 #

方案1：保存时过滤主题相关字段 #

在保存数据时，主动剔除saved_data中的主题配置，只保留图表核心数据（比如指标、时间周期、K线设置等）。

修改你的保存函数：

tvWidget.value.subscribe("onAutoSaveNeeded", save);

function save () {
    tvWidget.value.save((res) => {
        // 过滤掉主题相关字段
        const filteredData = { ...res };
        // 删除theme字段（TradingView默认的主题标识）
        delete filteredData.theme;
        // 删除overrides中所有颜色相关的配置
        if (filteredData.overrides) {
            Object.keys(filteredData.overrides).forEach(key => {
                if (key.includes('color') || key.includes('bg') || key.includes('background')) {
                    delete filteredData.overrides[key];
                }
            });
        }
        SavedDataTVChart.value = filteredData;
        localStorage.setItem("SavedDataTVChart", JSON.stringify(filteredData));
    })
}

方案2：加载时强制覆盖主题 #

加载saved_data时，手动注入当前应用的主题配置，覆盖旧数据里的主题设置。

假设你已经有当前主题的配置（比如从应用状态或本地存储获取），修改加载代码：

// 示例：当前应用的主题配置
const currentAppTheme = {
    theme: "dark", // 可选"light"或自定义主题名
    overrides: {
        "chart.background": "#1e222d",
        "plot.color": "#4bc0c0",
        // 其他你需要的主题颜色配置
    }
};

const widgetOptions = {
    saved_data: {
        ...SavedDataTVChart.value,
        // 强制替换为当前主题
        theme: currentAppTheme.theme,
        // 合并非主题配置与当前主题的颜色覆盖
        overrides: {
            ...(SavedDataTVChart.value.overrides || {}),
            ...currentAppTheme.overrides
        }
    },
};

方案3：图表加载完成后重置主题 #

如果前两种方案效果不佳，可以在图表初始化完成后，调用TradingView API重新应用当前主题：

// 初始化widget后监听就绪事件
tvWidget.value.subscribe("onChartReady", () => {
    // 设置主题
    tvWidget.value.setTheme("dark"); // 替换为你的当前主题值
    // 应用自定义颜色覆盖
    tvWidget.value.applyOverrides({
        "chart.background": "#1e222d",
        "candle.upColor": "#26a69a",
        "candle.downColor": "#ef5350"
    });
});

内容的提问来源于stack exchange，提问作者lúc lắc