У меня проблема с высокими картами, это связано с отображением переданных данных

Question

Я проверил различные примеры, но не смог найти ни одного с этим делом.Мои данные будут в этом формате

{
"INDIA": {
    "value": 1228,
    "sumothervalue": 962,
    "total": 2190
},
"CHINA": {
    "value": 45,
    "sumothervalue": 0,
    "total": 45
},
"RUSSIA": {
    "value": 748,
    "sumothervalue": 0,
    "total": 748
},
"US": {
    "value": 964,
    "sumothervalue": 100,
    "total": 1064
 }
}

Предполагая, что код страны находится в подходящем формате, как я могу показать значение на карте, как на изображении ниже

Answer 1

Вы можете использовать всплывающую подсказку и распечатать необходимые данные.

 tooltip: {
            headerFormat: '',
            pointFormat: 'Name: {point.name} <br> Some Data: {point.somedata} <br> Value: {point.value}'
        }

$(document).ready(function() {
    // Prepare demo data
    var data = [
        {
            "hc-key": "in",
            "somedata":"Random Data 28",
            "value": 0
        },
        {
            "hc-key": "us",
            "somedata":"Random Data 32",
            "value": 1
        },
        {
            "hc-key": "ru",
            "somedata":"Random Data 55",
            "value": 2
        },
        {
            "hc-key": "bd",
            "somedata":"Random Data 88",
            "value": 3
        }
    ];

    // Initiate the chart
    $('#container').highcharts('Map', {

        title : {
            text : 'Highmaps'
        },
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        colorAxis: {
            min: 0
        },
        tooltip: {
            headerFormat: '',
            pointFormat: 'Name: {point.name} <br> Some Data: {point.somedata} <br> Value: {point.value}'
        },

        series : [{
            data : data,
            mapData: Highcharts.maps['custom/world'],
            joinBy: 'hc-key',
            name: 'Random data',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.value}'
            }
        }]
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>

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