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

您需要使用@ViewChild将Highcharts连接到模板对象。

将此添加到您的component.ts中：

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

在您的模板中添加#container标签：

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

尽管使用提供的Highcharts Angular version会更容易。

Answer 2

我准备了一个演示，演示了如何在Angular环境中实现印度地图。

演示：https://stackblitz.com/edit/angular-highcharts-stock-rq1qek?file=app/app.component.ts