AMcharts地图in angular js

Question

我目前正在使用AM Charts地图。我想在angularjs中实现下面的链接。我如何转换成角度js？我是否应该执行指令？

link

<div id="chartdiv"></div> 

Answer 1

您可以添加以下文件的组成部分。

map.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './map.component.html', 
    styleUrls: ['./map.component.css'] 
}) 
export class MapComponent { 
    private id = "mapdiv"; 

    private options; 

    makeChartConfig() { 

     return { 
      "type": "map", 
      "theme": "light", 

      "colorSteps": 10, 

      "dataProvider": { 
       "map": "indiaLow", 
       "areas": [{ 
        "id": "IN-AN", 
        "value": 4447100 
       }, { 
        "id": "IN-AP", 
        "value": 626932 
       }, { 
        "id": "IN-KA", 
        "value": 5130632 
       }] 
      }, 

      "areasSettings": { 
       "autoZoom": true 
      }, 

      "valueLegend": { 
       "right": 10, 
       "minValue": "little", 
       "maxValue": "a lot!" 
      } 

     }; 
    } 

    ngOnInit() { 
     this.options = this.makeChartConfig(); 
    } 
} 

map.component.html

<amCharts [id]="id" [options]="options" [style.width.%]="100" [style.height.px]="500"></amCharts>