将 php 数据绘制到 Highmap 中：HighCharts

Posted 2023-02-24

【中文标题】将 php 数据绘制到 Highmap 中：HighCharts

【英文标题】：Plot php data into Highmap : HighCharts

【发布时间】：2019-08-24 18:24:28

【问题描述】：

您好，我正在使用 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

【参考方案1】：

Highcharts 要求每种类型的系列数据都有特定的格式。对于地图气泡，它需要name, z。你试图给它Country, persons。此外，您的加入不正确。

这是一个简单的 javascript 代码，它将您的 JSON 数据转换为可以被 highcharts 摄取的数据：

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/

ma​​pbubble.data 上的 API： https://api.highcharts.com/highmaps/series.mapbubble.data

【讨论】：

您好，先生，您的代码有效。但我有一个小问题，我们可以将悬停框中的文本从国家代码更改为其国家名称吗？

是的，有可能。我现在修复了它，将工具提示设置为获取 point.properties.name 而不是 point.properties.hc-a2

这真的很有帮助。感谢您的宝贵意见。