Я использую Angular Google Charts для отображения графиков свечей. В настоящее время это выглядит следующим образом:
Я хочу добавить точки, представляющие ордера на покупку и продажу, для моего тестирования на истории. Вот так:
Обратите внимание на красные / зеленые точки. По сути, парень сделал это с дополнительным ser ie:
У меня есть два слоя stati c, первый для свечей (Candle Series), а второй для результатов бэкстеста ( Bubble Series)
Графики Google позволяют мне использовать Точечные диаграммы , которые представляют эти точки. Однако я не знаю, как добавить новую точечную диаграмму ser ie в мою свечную диаграмму. Кто-то уже сделал это? Код ниже.
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>