角度js中的AMcharts地图答案

【问题标题】：AMcharts Map in angular js角度js中的AMcharts地图
【发布时间】：2017-03-17 07:44:31
【问题描述】：

我目前正在研究 AM Charts Maps。我想在 angularjs 中实现下面的链接。我如何转换成角度js？我应该执行指令吗？

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

【问题讨论】：

标签： angularjs angularjs-directive maps amcharts

【解决方案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>

【讨论】：