AMcharts地图在角度js

Question

我目前正在研究AM图表地图。我想在angularjs中实现以下链接。如何转换为角度 js？我应该执行指令吗？

链接

<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>