Вывести данные php в Highmap: HighCharts

Question

Привет! Я работаю с Highmaps JS, и я хочу собрать данные из моей базы данных в highMaps. Вот что я попробовал.

php код:

$json_data=array(); 

foreach($result as $rec)  
{  
$json_array['Country']=$rec['user_country'];  
$json_array['persons']=$rec['usercountry']; 

$json_array['code']=$keyvalue[$rec['user_country']]; 

array_push($json_data,$json_array);  
}  $data = json_encode($json_data) ;

А вот сценарий, который я использую:

<script type="text/javascript">

var data = <?php echo $data ; ?>
Highcharts.mapChart('world-map', {
    chart: {
        borderWidth: 1,
        map: 'custom/world'
    },

    title: {
        text: 'World population 2013 by country'
    },

    subtitle: {
        text: 'Demo of Highcharts map with bubbles'
    },

    legend: {
        enabled: false
    },
     mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },
    series: [{
        name: 'Countries',
        color: '#E0E0E0',
        enableMouseTracking: false
    }, {
        type: 'mapbubble',
        name: 'Population 2016',
        joinBy: ['iso-a3', 'code3'],
        data: data,
        minSize: 4,
        maxSize: '12%',
        tooltip: {
            pointFormat: '{point.properties.hc-a2}: {point.z} thousands'
        }
    }]
 });
 });
 </script>       

Итак, я хочу отобразить пузырь страны с данными. но на странице ничего нет. все пусто.

Значение JSON, которое я получаю:

[{"Country":"Australia","persons":"5","CountryCode":"AU"}, 
{"Country":"India","persons":"8","CountryCode":"IN"}, 
{"Country":"Mexico","persons":"4","CountryCode":"MX"}, 
{"Country":"Spain","persons":"2","CountryCode":"ES"},
{"Country":"United States","persons":"4","CountryCode":"US"}]    

Ошибка, которую я вижу в консоли:

Uncaught SyntaxError: Unexpected identifier

Answer 1

Highcharts ожидает определенный формат для каждого типа данных серии.Для mapbubble ему нужно {name, z}.Вы пытаетесь дать это {Country, persons}.Кроме того, ваше присоединение не является правильным.

Вот простой код javascript, который преобразует ваши данные JSON в данные, которые могут быть загружены старшими диаграммами:

data = data.map(function(el){
  return {name: el.Country, z: parseInt(el.persons), 'iso-a2': el.CountryCode}
})

Это делает ключ объединения: 'iso-a2'.

Что заставляет все это выглядеть так:

var data = [{"Country":"Australia","persons":"5","CountryCode":"AU"}, 
{"Country":"India","persons":"8","CountryCode":"IN"}, 
{"Country":"Mexico","persons":"4","CountryCode":"MX"}, 
{"Country":"Spain","persons":"2","CountryCode":"ES"},
{"Country":"United States","persons":"4","CountryCode":"US"}]
data = data.map(function(el){
	return {name: el.Country, z: parseInt(el.persons), 'iso-a2': el.CountryCode}
})

Highcharts.mapChart('world-map', {
    chart: {
        borderWidth: 1,
        map: 'custom/world'
    },

    title: {
        text: 'World population 2013 by country'
    },

    subtitle: {
        text: 'Demo of Highcharts map with bubbles'
    },

    legend: {
        enabled: false
    },
     mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },
    series: [{
        name: 'Countries',
        color: '#E0E0E0',
        enableMouseTracking: false
    }, {
        type: 'mapbubble',
        name: 'Population 2016',
      	joinBy: 'iso-a2',//'iso-a3', 'code3'],
        data: data,
        minSize: 4,
        maxSize: '12%',
        tooltip: {
            pointFormat: '{point.properties.name}: {point.z} thousands'
        }
    }]
 });

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<div id='world-map'>

</div>

Пример работы JSFiddle: https://jsfiddle.net/ewolden/yqm78dtp/19/

API на mapbubble.data: https://api.highcharts.com/highmaps/series.mapbubble.data