angular - 将散点图系列添加到 Angular Google Charts 中的烛台图

Question

我正在使用 Angular Google Charts显示烛台图表。目前它看起来如下:



我想为我的回测添加代表买入和卖出订单的点。就像这样:



注意红/绿点。基本上这个家伙做了一个额外的系列:

I have two static layers, the first one for the candles (Candle Series), and the second for the backtest results (Bubble Series)

Google 的图表允许我使用 Scatter charts代表那些点。但是，我不知道如何将新的散点图系列添加到我的烛台图表中。有没有人做过？代码如下。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { KlineInterval } from 'src/app/core/types/bot';
import { DatePipe } from '@angular/common';
import { BinanceKline } from 'src/app/core/types/binance';
import { BinanceService } from 'src/app/core/services/binance.service';

@Component({
  selector: 'app-backtesting',
  templateUrl: './backtesting.component.html',
  styleUrls: ['./backtesting.component.css']
})
export class BacktestingComponent implements OnInit, OnDestroy {
  binances$: Observable<BinanceKline[]>;

  private componentDestroyed$ = new Subject<boolean>();

  // Angular Google Charts
  chartDrawn = false;
  chartData = [];
  chartOptions = {
    tooltip: { isHtml: true },
    title: 'Backtesting',
    height: 500,
    chartArea: { width: '80%', height: '80%' },
    legend: { position: 'bottom', textStyle: { color: 'black', fontSize: 16 } },
    series: {
      0: { color: 'black', visibleInLegend: true },
      3: { color: 'red', visibleInLegend: true }
    }
  };
  chartColumnNames = ['Label', 'Low', 'Open', 'Close', 'High', { type: 'string', role: 'tooltip', p: { html: true } }];

  constructor(private binanceService: BinanceService) { }

  ngOnInit() {
    this.getAllKlines();
  }

  ngOnDestroy() {
    this.componentDestroyed$.next(true);
    this.componentDestroyed$.complete();
  }

  private customTooltip(candlestick: BinanceKline): string {
    let pipe = new DatePipe('en-US');
    let openTime = pipe.transform(candlestick.openTime, 'HH:mm');
    let closeTime = pipe.transform(candlestick.closeTime, 'HH:mm');

    return `<div style="font-size: 14px; white-space: nowrap; padding: 10px;">
    <b>Open Time:</b> ${openTime}<br /><b>Close Time:</b> ${closeTime}<br />
    <b>Open:</b> ${candlestick.open.toFixed(2)}<br /><b>Close:</b> ${candlestick.close.toFixed(2)}<br />
    <b>High:</b> ${candlestick.high.toFixed(2)}<br /><b>Low:</b> ${candlestick.low.toFixed(2)}<br />
    <b>VOL:</b> ${candlestick.volume.toFixed(2)}
    </div>`;
  }

  private getAllKlines() {
    this.binances$ = this.binanceService.getAllKlines("TRXUSDT", KlineInterval.OneHour);

    this.chartDrawn = false;
    this.chartData = [];

    this.binances$
      .pipe(takeUntil(this.componentDestroyed$))
      .subscribe(candlesticks => {
        for (let i = 0; i < candlesticks.length; i++) {
          this.chartData.push([
            null,
            candlesticks[i].low,
            candlesticks[i].open,
            candlesticks[i].close,
            candlesticks[i].high,
            this.customTooltip(candlesticks[i])
          ]);
        }

        this.chartDrawn = true;
      });
  }
}

<section id="backtesting">
  <div class="container">
    <div class="row">

      <ng-container *ngIf="chartDrawn">
        <div class="col-lg-12">
          <google-chart class="mb-1" type="CandlestickChart" [data]="chartData" [options]="chartOptions"
            [columnNames]="chartColumnNames">
          </google-chart>
        </div>
      </ng-container>

    </div>
  </div>
</section>

Answer 1

Google Angular Charts 提供了一种创建组合图表的方法。
组合图表有助于在同一图表中将系列呈现为不同类型。
可以使用以下类型:线、区域、条形、烛台和阶梯区域。
遵循此处的下一个文档:

https://developers.google.com/chart/interactive/docs/gallery/combochart

我认为正确的组合是烛台 + 折线图，然后您可以根据需要将图表中的线条更改为不显示。

您可能会找到有关如何将这两者结合起来的 JS 教程 here