时间戳

首页 > 解决方案 > 向 Ionic v4 应用程序添加高图指标时遇到问题

ionic-framework - 向 Ionic v4 应用程序添加高图指标时遇到问题

问题描述

我正在努力让一个在 Ionic v4 应用程序中的股票图表上工作的 highcharts 指标。

我已经 npm 安装了 highcharts 节点模块...

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/indicators 导入链接到图表。

我也尝试添加

<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>

到主要的 index.html 但无济于事。

任何帮助都感激不尽！

标签： ionic-frameworkhighcharts

解决方案

导入指标后，您还必须像这样初始化它：

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 包装器的演示：

推荐阅读