如何保存TradingView Widget图表的绘图与批注，支持用户复访查看？

Hey there! Great question—this is totally achievable with the TradingView Widget, even without using the full SDK (since you don't have your own data). Here's a step-by-step breakdown to implement this using your own storage:

Key Concepts to Use #

TradingView's Widget exposes two critical callbacks and configuration options to handle saving/loading user drawings: onSave (to capture drawing data) and load_chart (to restore it). You'll just need to handle storing the data on your end.

Step 1: Enable Save Controls & Capture Drawing Data #

First, configure your Widget to show the save button and listen for when users save their work. Add these options to your Widget initialization:

new TradingView.widget({
  // Your existing Widget config (symbol, interval, theme, etc.)
  show_save_btn: true, // Enables the save button in the Widget's UI
  onSave: function(saveData) {
    // saveData is a JSON object containing all drawings, annotations, and chart settings
    // Store this data in your system:
    // Option 1: For logged-in users, send to your backend database
    fetch('/api/save-chart-data', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ userId: 'current-user-id', chartData: saveData })
    });

    // Option 2: For anonymous users, use localStorage (device-only persistence)
    localStorage.setItem('tv_user_drawings', JSON.stringify(saveData));
  }
});

When a user clicks the save button in the Widget, the onSave callback fires with all their custom drawing/annotation data packaged in saveData.

Step 2: Load Saved Data on Return Visits #

When a user comes back to your site, retrieve the stored data and pass it to the Widget during initialization:

// Fetch saved data (adjust based on your storage method)
let savedChartData;
// From localStorage:
savedChartData = localStorage.getItem('tv_user_drawings');
// Or from your backend (for logged-in users):
// savedChartData = await fetch('/api/get-chart-data?userId=current-user-id').then(res => res.json());

// Parse the data if it exists
if (savedChartData) {
  savedChartData = JSON.parse(savedChartData);
}

// Initialize Widget with loaded data
new TradingView.widget({
  // Your existing config
  load_chart: savedChartData, // Pass the saved data here to restore all drawings
  show_save_btn: true,
  onSave: function(saveData) {
    // Reuse your storage logic from Step 1
  }
});

If you prefer to load data after the Widget is fully ready (instead of on initialization), you can use the onChartReady callback to call the Widget's load method:

let widget;
widget = new TradingView.widget({
  // Your config
  onChartReady: function() {
    if (savedChartData) {
      widget.load(savedChartData);
    }
  }
});

Important Notes #

• Data Format: The saveData object is a structured JSON that TradingView understands natively—you don't need to modify it, just store and retrieve it as-is.
• Cross-Device Sync: If you want users to access their drawings across devices, you must store the data in your backend database tied to their user account (localStorage only works per device).
• Testing: Make sure to test different drawing types (trendlines, text annotations, shapes, Fibonacci retracements, etc.) to confirm they all save/load correctly.
• Widget Version: Ensure you're using a recent stable version of the TradingView Widget to avoid compatibility issues with these callbacks.

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