Карта в Highcharts не отображать карту Индии?

Question

Мы пытаемся добавить карту на Angular, чтобы показать некоторые случайные данные на индийской карте, используя Highcharts, но она не показывает карту, и в моей консоли также нет ошибки, поэтому ее трудно найти. Мы не нашли никакого решения для Angular.

мой код файла app.ts указан ниже

import { Component,OnInit, AfterViewInit } from '@angular/core';
import { Chart } from 'angular-highcharts';
import * as Highcharts from "highcharts";
import * as HighchartsMore from "highcharts/highcharts-more";
import * as HighchartsExporting from "highcharts/modules/exporting";

declare var $;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent  implements OnInit {
  title = "app";
  options: any = {
    colors: ['#f45b5b', '#8085e9', '#8d4654', '#7798BF', '#aaeeee',
    '#ff0066', '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
    chart: {
      backgroundColor: null,
      style: {
        fontFamily: 'Signika, serif'
      }
    },
    title: {
      style: {
        color: 'black',
        fontSize: '16px',
        fontWeight: 'bold'
      }
    },
    subtitle: {
      style: {
        color: 'black'
      }
    },
    tooltip: {
      borderWidth: 0
    },
    labels: {
      style: {
        color: '#6e6e70'
      }
    },
    legend: {
      backgroundColor: '#E0E0E8',
      itemStyle: {
        fontWeight: 'bold',
        fontSize: '13px'
      }
    },
    xAxis: {
      labels: {
        style: {
          color: '#6e6e70'
        }
      }
    },
    yAxis: {
      labels: {
        style: {
          color: '#6e6e70'
        }
      }
    },
    plotOptions: {
      series: {
        shadow: true
      },
      candlestick: {
        lineColor: '#404048'
      },
      map: {
        shadow: false
      }
    },
    // Highstock specific
    navigator: {
      xAxis: {
        gridLineColor: '#D0D0D8'
      }
    },
    rangeSelector: {
      buttonTheme: {
        fill: 'white',
        stroke: '#C0C0C8',
        'stroke-width': 1,
        states: {
          select: {
            fill: '#D0D0D8'
          }
        }
      }
    },
    scrollbar: {
      trackBorderColor: '#C0C0C8'
    }
  };
  constructor() { }

  ngOnInit(){

    $(document).ready(function() {
      $('#example').DataTable();
    } );


    Highcharts.chart('container', this.options);

    Highcharts.createElement('link', {
      href: 'https://fonts.googleapis.com/css?family=Signika:400,700',
      rel: 'stylesheet',
      type: 'text/css'
    }, null, document.getElementsByTagName('head')[0]);
    // Add the background image to the container
    Highcharts.addEvent(Highcharts.Chart, 'afterGetContainer', function () {
      // eslint-disable-next-line no-invalid-this
      this.container.style.background =
      'url(https://www.highcharts.com/samples/graphics/sand.png)';
    });
  }




}

мой html код файла указан ниже

<div id="container"></div>

Answer 1

Я подготовил демонстрацию, в которой показано, как реализовать карту Индии в среде Angular.

Демо: https://stackblitz.com/edit/angular-highcharts-stock-sjcf9h?file=app / app.component.ts

Answer 2

Вам необходимо использовать @ViewChild для подключения Highcharts к объекту шаблона.

Добавьте это в ваш component.ts:

  @ViewChild('container', { static: false }) container: ElementRef; 

В свой шаблон добавьте тег #container :

<div id="container" #container></div>

Использование предоставленной Highcharts Angular версии было бы проще, хотя.