如何为 TradingView 的图表库实现 save() 和 load()

Question

在尝试实现 TradingView 的保存和加载低级 API 时，我无法让库在加载从后端返回的对象时刷新屏幕。

load() 只会导致屏幕闪烁，没有错误。图表不会更新。

如何在 Angular 前端的 TradingView 小部件中保存和加载数据？

Answer 1

我可以确认 save() 和 load() 在我的项目中正常工作。需要对类型进行一些处理才能使其正常工作。我确信有人看到这堆东西会感到绝望——但它确实有效。

因此，对于其他想要测试的人：

tvWidget.load(savedObject)
tvWidget.save((saveObject) => this.chartService.saveCurrentChart(saveObject))

我在 tvWidget 标题中创建了一个保存按钮：

    const saveButton = tvWidget.createButton();
    saveButton.setAttribute('title', 'Click to Save Chart');
    saveButton.classList.add('apply-common-tooltip');
    saveButton.addEventListener('click', () => tvWidget.save((saveObject) => this.chartService.saveCurrentChart(saveObject, tvWidget)))
    saveButton.innerHTML = 'Save Chart';

tvWidget 标题中还有一个加载按钮：

    createDrawingButton(tvWidget: IChartingLibraryWidget) {
    const loadButton = tvWidget.createButton();
    loadButton.setAttribute('title', 'Click to Load Chart');
    loadButton.classList.add('apply-common-tooltip');
    loadButton.addEventListener('click', () => tvWidget.load(this.chartService.loadSavedChart()));
    loadButton.innerHTML = 'Load from Backend';

这是我的 TypeScript 界面：

export interface APIChartData {
    ltChartId?: number | undefined
        tvChartId?: string | undefined
    chartObject: Object
        lastUpdate?: number | undefined
}

这是我的保存功能：

saveCurrentChart(tvChartObject: any) {

let chartID = tvChartObject['charts'][0]['panes'][0]['sources'][0]['id'];
let chartToSave: APIChartData = {
      ltChartId: this._currentChart?.ltChartId,
      tvChartId: chartID,
      chartObject: tvChartObject,
      lastUpdate: Math.floor(Date.now() / 1000),
    };

    this.postChart(chartToSave).subscribe((response) => {

      console.log("Response from Server")
      console.log(response.ltChartId)
      this._savedChartId =  response.ltChartId
    });

    console.log(`Saved Chart Object`);
  }

private postChart(saveChart: APIChartData): Observable<ChartStoreResponse> {
    console.log('Trying to save...');
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        accept: 'application/json',
        Authorization: this._oAuthTokent,
      }),
    };

这是我的加载函数：

loadSavedChart(chartID:number = this._savedChartId): Object {

    console.log('Trying to load...');
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        accept: 'application/json',
        Authorization: this._oAuthTokent,
      }),

      params: new HttpParams().set('chart', chartID.toString()),
    };

    const httpParams = {};

    // My "Backend" in a docker image locally running FASTAPI
    const LoadURL = 'http://localhost/api/v1/tradingview';

    let chartObject: Object = {};

    let loadChart$ = this.http
      .get<APIChartData>(LoadURL, httpOptions)
      .pipe(tap(() => console.log('Loaded the goods.')));

    loadChart$.subscribe((object) => {

      this._chartFromDisk = object.chartObject;
      console.log(`Chart ${chartID} from Server Store:`)
      console.log(object.chartObject);

    });

    return this._chartFromDisk;
  }