#ionic-framework #highcharts
#ionic-framework #графики
Вопрос:
Я изо всех сил пытаюсь заставить индикатор highcharts работать на биржевом графике в приложении Ionic v4.
У меня установлен модуль npm highcharts node…
HTML:
<ion-content>
<ion-item >
<div id="container" style="width:100%; "></div>
</ion-item>
</ion-content>
ts:
import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts/highstock';
import * as Indicators from 'highcharts/indicators/indicators';
@Component({
selector: 'app-instrument',
templateUrl: './instrument.page.html',
styleUrls: ['./instrument.page.scss'],
})
export class InstrumentPage implements OnInit {
constructor() {}
ngOnInit() {}
ngDoCheck(){
Highcharts.stockChart('container', {
chart: {
height: '95%'
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
series: [{
id: 'mymain',
type: 'candlestick',
name: 'AAPL Stock Price',
data: [
[
1489411800000,
138.85,
139.43,
138.82,
139.2
],
[
1489498200000,
139.3,
139.65,
138.84,
138.99
],
[
1489584600000,
139.41,
140.75,
139.03,
140.46
],
[
1489671000000,
140.72,
141.02,
140.26,
140.69
],
[
1489757400000,
141,
141,
139.89,
139.99
],
[
1490016600000,
140.4,
141.5,
140.23,
141.46
],
[
1490103000000,
142.11,
142.8,
139.73,
139.84
],
[
1490189400000,
139.85,
141.6,
139.76,
141.42
],
[
1490275800000,
141.26,
141.58,
140.61,
140.92
],
[
1490362200000,
141.5,
141.74,
140.35,
140.64
],
[
1490621400000,
139.39,
141.22,
138.62,
140.88
],
[
1490707800000,
140.91,
144.04,
140.62,
143.8
],
[
1490794200000,
143.68,
144.49,
143.19,
144.12
],
[
1490880600000,
144.19,
144.5,
143.5,
143.93
],
[
1490967000000,
143.72,
144.27,
143.01,
143.66
],
[
1491226200000,
143.71,
144.12,
143.05,
143.7
],
[
1491312600000,
143.25,
144.89,
143.17,
144.77
],
[
1491399000000,
144.22,
145.46,
143.81,
144.02
],
[
1491485400000,
144.29,
144.52,
143.45,
143.66
],
[
1491571800000,
143.73,
144.18,
143.27,
143.34
],
[
1491831000000,
143.6,
143.88,
142.9,
143.17
],
[
1491917400000,
142.94,
143.35,
140.06,
141.63
],
[
1492003800000,
141.6,
142.15,
141.01,
141.8
],
[
1492090200000,
141.91,
142.38,
141.05,
141.05
],
[
1492435800000,
141.48,
141.88,
140.87,
141.83
]
]
},{
type: 'sma',
linkedTo: 'mymain'
}
]
});
}
}
Если я удалю раздел, относящийся к индикатору sma в конце, основной график будет работать так, как ожидалось. При этом он становится пустым.
Я действительно не понимаю, как связать highcharts / indicators / импорт индикаторов с графиком.
Я также пытался добавить
<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>
к основному index.html но безрезультатно.
С благодарностью принимаю любую помощь!
Ответ №1:
После импорта индикатора вы также должны инициализировать его подобным образом:
import * as Highcharts from "highcharts/highstock";
import * as Indicators from "highcharts/indicators/indicators";
Indicators(Highcharts);
Я рекомендую вам использовать официальную оболочку Highcharts Angular highcharts-angular . Его можно загрузить здесь:https://github.com/highcharts/highcharts-angular
Демо с highcharts-оболочкой angular:
Комментарии:
1. Удивительно, это сработало, спасибо. PS для Ionic 4 вам нужно внести небольшое изменение, чтобы устранить некоторые ошибки typescript: импортировать {Component, OnInit } из «@angular / core»; импортировать * как Highcharts из «highcharts / highstock»; импортировать SMA из «highcharts / indicators / индикаторы»; SMA (Highcharts);