#javascript #angular #typescript #charts
#javascript #угловой #typescript #Диаграммы
Вопрос:
Мне очень сложно это решить. У меня есть компонент, который получает данные Json с 2 разных URL-адресов для создания диаграммы:
- 1 данные обновления для старых значений
- другой для значения в реальном времени
Вот компонент:
@Component({
selector: 'app-staticchart',
templateUrl: './staticchart.component.html',
styleUrls: ['./staticchart.component.scss']
})
export class StaticchartComponent implements OnInit {
candles: Observable<Candlecollect[]>;
data: Array<any>;
candlecollect: Candlecollect;
start = Date.now();
end = Date.now() 1;
constructor(private candlecollectService: CandlecollectService,
public spinnerService: SpinnerService) {
}
ngOnInit(): void {
this.loadChart();
}
loadChart(): void {
/*
* Request to get the 500 latest Candlesticks - send by rest to the back api
*/
const answer = this.candlecollectService.extractCandles('url_1')
.subscribe(data => {
// tslint:disable-next-line:forin
for (let counter = 1; counter < 500; counter ) {
candleSeries.update({
// @ts-ignore
time: data.openTime / 1000,
open: data.open,
high: data.high,
low: data.low,
close: data.close
});
}
});
/*
* Request send by REST to get the real time values
*/
const binanceSocket = new WebSocket('url_2');
binanceSocket.onmessage = function(event) {
const message = JSON.parse(event.data);
// console.log(event.data);
const candlestick = message.k;
candleSeries.update({
// @ts-ignore8
time: candlestick.t / 1000,
open: candlestick.o,
high: candlestick.h,
low: candlestick.l,
close: candlestick.c
});
};
}
}
Вот html:
<mat-card class="dashboard-card">
<div id="chart" fxFill></div>
</mat-card>
Он работает отлично, но у меня есть такая проблема: мне нужно обновить страницу, иначе диаграмма не отображается.
Итак, я попытался настроить SpinnerService для ожидания загрузки, но это не работает.
Извините, если этот вопрос кажется глупым, но я работаю с angular в течение 1 месяца, и это немного сложно … ^^
Комментарии:
1. Как выглядит ваш html-шаблон?
2. Я поместил его в начальный пост, но он очень простой. Диаграмма инициализируется в <div class=»chart»>
3. я вижу Candleeries и директиву fxFill. Что они делают?
4. candleeries просто добавляют данные на график. fxFill — это визуальное свойство angular material для адаптации содержимого.
5. Вы не привязали какое-либо свойство вашего класса компонентов к своему шаблону. Обновление служебных данных не изменит ваш шаблон, если вы не свяжете некоторые переменные внутри вашего шаблона